拦截器作用

  拦截器可以在每一次请求或响应被thencatch处理之前拦截它们,并对其进行操作。利用拦截器可以统一对请求或响应做一些处理,比如统一为请求添加 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
  })
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐