axios的interceptors多次执行问题解决

目录

• 问题
• 原因
• 解决

问题

在进行 axios 封装的时候,遇到个问题，就是每次发起请求时axios 都会执行两次响应拦截，甚是纳闷，一时理不出思路来。

代码如下：

class Http {
    constructor(config) {
        this.axios = axios;
        this.axiosInterceptor = undefined;
        // 公共的 header
        let defaultHeaders = {
            'Content-Type': 'application/json;charset=UTF-8',
            'Accept': 'application/json', // 通过头指定，获取的数据类型是JSON 'application/json, text/plain, */*',
            'x-end-point': '.10.'
        }
        if(config?.headers){
            for (let i in config.headers) {
                defaultHeaders[i] = config.headers[i];
            }
        }
        axios({
            // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
            // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
            baseURL: config?.baseURL,
            // `url` 是用于请求的服务器 URL
            url: config?.url,
            // `method` 是创建请求时使用的方法
            method: config?.method || 'get',
            // `headers` 是即将被发送的自定义请求头
            headers: {...defaultHeaders},
            // `params` 是即将与请求一起发送的 URL 参数
            // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
            params: config?.method === 'get' ? config?.params || {} : {},
            // `paramsSerializer` 是一个负责 `params` 序列化的函数
            // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
            paramsSerializer: function(params) {
                return Qs.stringify(params, {arrayFormat: 'brackets'})
            },
            // `data` 是作为请求主体被发送的数据
            // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
            // 在没有设置 `transformRequest` 时，必须是以下类型之一：
            // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
            // - 浏览器专属：FormData, File, Blob
            // - Node 专属： Stream
            data: config?.method === 'post' ? config?.params || {} : {},
            // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
            // 如果请求话费了超过 `timeout` 的时间，请求将被中断
            timeout: 0,
            // `withCredentials` 表示跨域请求时是否需要使用凭证
            withCredentials: false, // default 为true则产生跨域,跨域携带cookie
            // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
            responseType: 'json', // default
        });
        // 添加请求拦截器
        axios.interceptors.request.use( (config) =>  {
            // 在发送请求之前做些什么
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });
        // 添加响应拦截器
        axios.interceptors.response.use((res) => {
            const { status, data } = res;
            // 对错误状态提示进行处理
            let message = ''
            if (status < 200 || status >= 300) {
                // 处理http错误，抛到业务代码
                message = this.showResState(status)
                if (typeof res.data === 'string') {
                    res.data = {code:status, message }
                } else {
                    res.data.code = status
                    res.data.message = message
                }
            }
        return res.data;
        }, function (error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });
    }
    get(url,params={}){
        // 为给定 ID 的 user 创建请求
        return new Promise((resolve, reject) => {
            this.axios.get(url,{
                params
            }).then(response => {
                // 2. 如果成功了, 调用resolve(value)
                resolve(response);
            })
                .catch(error => {
                    // 3. 如果失败了, 不调用reject(reason), 而是提示异常信息
                    reject(error)
                    // message.error('请求出错了: ' + error.message).then(r => {});
                }).finally(() => {
            })
        });
    }
    post(url,params={}){
        return new Promise((resolve, reject) => {
            this.axios.post(url, params).then(response => {
                // 2. 如果成功了, 调用resolve(value)
                resolve(response);
            })
                .catch(error => {
                    // 3. 如果失败了, 不调用reject(reason), 而是提示异常信息
                    reject(error)
                    // message.error('请求出错了: ' + error.message).then(r => {});
                }).finally(() => {
            })
        });
    }
    showResState (state) {
        let message = '';
        // 这里只做部分常见的示例，具体根据需要进行配置
        switch (state) {
            case 400:
                message = '请求错误(400)'
                break
            case 401:
                message = '未授权，请重新登录(401)'
                break
            case 403:
                message = '拒绝访问(403)'
                break
            case 404:
                message = '请求出错(404)'
                break
            case 500:
                message = '服务器错误(500)'
                break
            case 501:
                message = '服务未实现(501)'
                break
            case 502:
                message = '网络错误(502)'
                break
            case 503:
                message = '服务不可用(503)'
                break
            default:
                message = `连接出错(${state})!`
        }
        return `${message}，请检查网络或联系网站管理员！`
    }
    // 插件初始化时会传入所需的配置项
    autoAddToken (config) {
        // 在请求阶段时修改 config 配置项为其添加 token 具体属性名称可自定义
        config.headers ??= {}
        config.headers.Authorization = localStorage.token || null
        return config
    }
}
export default Http;

可能遇到过该类问题的小伙伴们一眼就看出问题所在，对于未有碰到过这个问题的小伙伴，可能就又点煎熬了。

原因

若你使用use，就像Node.js里的use那样，会不断地往axios对象添加interceptors，由于我将该拦截器放在函数内，只要函数被执行，则会再次将拦截器函数增添到axios对象上。

所以，推荐的办法是，将拦截器放在函数外，可我的需求决定了，我必须将它放在函数内，那么该如何解决呢？

解决

添加该文件内的唯一变量标识符let interceptor = null，进行判断，只要拦截器存在，则不会继续添加，部分代码如下所示：

if (!this.interceptor) {
// 添加响应拦截器
this.interceptor = axios.interceptors.response.use((res) => {
        const { status, data } = res;
        // 对错误状态提示进行处理
        let message = ''
        if (status < 200 || status >= 300) {
            // 处理http错误，抛到业务代码
            message = this.showResState(status)
            if (typeof res.data === 'string') {
                res.data = {code:status, message }
            } else {
                res.data.code = status
                res.data.message = message
            }
        }
    return res.data;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
  }

奈何不好使。不得一不得不把拦截器提取到类外部，问题解决。

这里只贴部分主要代码:

import axios from "axios";
/* 将拦截器 置于封装类之外 */
// 添加请求拦截器
axios.interceptors.request.use( (config) =>  {
    // 在发送请求之前做些什么 添加 token 等鉴权功能
    //...
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use((res) => {
    const { status } = res;
    // 在发送结果之前做些什么  对错误状态提示进行处理
    //...
    return res.data;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
class Http {
    constructor(config) {
        this.axios = axios;
        // 这里仍需对配置进行处理，代码省略了
        this.config = config;
    }
    // Get 请求
    get(url,params={},headers={}){
        // ...
    }
    // POST 请求
    post(url,params={},headers={}){
        // ...
    }
}
export default Http;
// 无特殊需求的只需使用这个一个对象即可 公共 header 可在此配置, 如需多个实例 可按照此方式创建多个进行导出
export const Axios = new Http({
    headers: {
        'x-http-token': 'xxx'
    }
});

这里不对具体的方法进行描述，只做一个解决问题的说明，后续会针对 axios 类的封装，单独写篇文章再详细说明下的

以上就是axios的interceptors多次执行问题解决的详细内容，更多关于axios interceptors多次执行的资料请关注脚本之家其它相关文章！