Axios 拦截器

拦截器作用

　　拦截器可以在每一次请求或响应被then或catch处理之前拦截它们，并对其进行操作。利用拦截器可以统一对请求或响应做一些处理，比如统一为请求添加 token ，统一对响应的数据进行一些处理等

创建拦截器的方法

axios.interceptors.request.use()

　　通过axios.interceptors.request.use(fun1, fun2)方法创建请求拦截器，它接受两个函数作为参数。
　　fun1 接受一个自动传入的对象作为参数，该对象就是请求的配置对象。可以在 fun1 中对配置对象进行一些修改，从而影响请求操作。fun1 需要返回一个对象，即请求的配置对象。
　　fun2 也接受一个自动传入的对象作为参数，该对象包含请求错误时的错误信息。可以在 fun2 中对其进行操作，从而对请求的错误信息进行统一的处理。

// 添加请求拦截器
axios.interceptors.request.use(
	config => {
	// fun1 发送请求之前做一些处理
        if (getToken()) {
            config.headers['Authorization'] = 'June ' + getToken() /
        }
        if (config.method == 'delete') {
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        }
        return config
    },
    error => {
    // fun2 对错误信息进行处理
        return Promise.reject(error)
    }
)

axios.interceptors.response.use()

　　通过axios.interceptors.response.use(fun3, fun4)方法创建响应拦截器。该方法与请求拦截器基本一样，唯一的区别就是接受的参数对象不同，fun3 接受的参数对象是响应数据对象，fun4 接受的是响应错误对象。

axios.interceptors.response.use(
    response => {
        const code = response.status
        if (code < 200 || code > 300) {
            return Promise.reject(response);
        } else {
            return response.data
        }
    },
    error => {
    	return Promise.reject(error)
	}

　　更多的，可以通过自定义 axios 实例添加拦截器。在实际项目中一般会用这种方法。

const service= axios.create({
    baseURL: process.env.BASE_API, 
    timeout: 5000 
});
service.interceptors.request.use(
	config => {
	// 发送请求之前做一些处理
        if (getToken()) {
            config.headers['Authorization'] = 'June ' + getToken() /
        }
        if (config.method == 'delete') {
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        }
        return config
    },
    error => {
    // 对错误信息进行处理
        return Promise.reject(error)
    }
);

使用方法

　　在 request.js 文件导出 service对象。

export default service

　　然后在其他文件中引入并使用，具体如下。

import request from '@/utils/request'
export const getData = params => {
  return request({ 
    url: '/api/xxx',
    method: 'GET',
    params: params
  })
}