axios再次封装对请求和响应做拦截

木之句芒

于 2020-04-17 17:51:40 发布

阅读量308

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/nathercloud/article/details/105585520

版权

本文介绍如何使用Axios进行二次封装以实现全局的请求和响应拦截。通过在配置中设置超时时间，并利用请求和响应拦截器，可以统一处理如参数序列化、token添加等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios本身无法满足全局拦截，需要再次封装
代码如下：

import axios from 'axios';
import qs from 'qs';
const instance = axios.create({
    //当创建实例的时候配置默认配置
    timeout: 600000
});

//添加请求拦截器
instance.interceptors.request.use(function (config) {
    if (config.method === "get") {
        config.paramsSerializer = params => {
            return qs.stringify(params, { indices: false })
        }
    }
    if (config.method === "delete") {
        config.paramsSerializer = params => {
            return qs.stringify(params, { indices: false })
        }
    }
    if (token) {
        Object.assign(config.headers, { "x-token": token })
    }
    return config;
}, function (error) {
    return Promise.reject(error);
});

//添加一个响应拦截器
instance.interceptors.response.use(response => {
    return Promise.resolve(response.data);
}, error => {
     return Promise.reject(error.response.data);
});

export default instance;