vue axios二次封装思考和思路【自用】

说明：也看了很多的封装了。但是脑子中也都是很乱的。由于对于项目很多都是未知。后台有可能传来什么样的数据也是未知，想要尽可能的学习，然后能更好的封装。稍微写一下，留作自用。

觉得封装思路对我有用的: vue中Axios的封装和API接口的管理.

安装

npm install axios --save

补充：

• -S是–save的简写
• -D是–save-dev的简写
  我之前只知道，-S是运行时依赖，-D是开发时依赖。还是去多了解了一下。
  区别：
• -S 依赖包的名称会出现在 dependencies 下
• -D 依赖包的名称会出现在 devDependencies 下
  这两个文件均在 package.json 文件中。而
  dependencies 是运行时依赖。
  devDependencies 是开发时依赖。
  总结： 如果只在开发时会用到，发布后用不到，就使用-D。

思路

• 在util文件夹下新建一个request.js文件。
  用来封装请求和相应拦截。

import axios from 'axios'

let service = axios.create({ //创建一个axios实例
	baseUrl: '',
	timeout: 2000
});

//request请求拦截器
service.interceptor.request.use(
	config => {
		// do something like getTooken
		return config;
	},
	error => {
		return Promise.error(error);
	}
);

//response响应拦截
service.interceptor.response.use(
	response => {
		//do something
		return Promise.resolve(response);
	},
	error => {
		//do something
		return Promise.reject(error);
	}
);

• 新建api文件夹，在api文件夹下建立依据业务需求的.js文件

// testApi.js
import request from '@/utils/request';

/**
 * 添加接口说明
 * 这只是个例子，因此很多变量都是空
 */
export const testApi = param => request({
	url: '',
	method: '',
	data: JSON.stringify(param),
	responseType: 'blob',
	...	
})

使用

//Test.vue
import { testApi } from '@/api/testApi'

mounted() {
  this.getFakeDataApi();
},
methods: {
  async getFakeDataApi() {
	try {
	  let params = {
		id: '01000',
		num: 13
	  }
	  this.data = await testApi(params);
	  // do something
	  console.log(this.data);
	} catch(e) {
	  // do something you need
	  console.log(e);
	}
  }
}

待改善。。。