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

最新推荐文章于 2024-07-06 10:22:29 发布

原创最新推荐文章于 2024-07-06 10:22:29 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

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;