typescript封装axios重复提交问题

import axios from 'axios';


// 防止重复提交,利用axios 的cancelToken

let pending: any[] = [];// 声明一个数组用于存储每个ajax请求的取消函数和ajax标识

const CancelToken: any = axios.CancelToken;
const service = axios.create({
    baseURL:process.env.BASE_URL,// 环境变量
    timeout: 5000,// 请求超时
})
console.log(process.env.BASE_URL);


const removePending: any = (config: any, f: any) => {
    // 获取请求的url 
    const flagUrl = config.url;
    // 判断请求是否在请求队列中
    if (pending.indexOf(flagUrl) !== -1) {
        // 如果请求中存在f ,axios提供的取消函数
        if (f) {
            f("取消重复请求");// 执行取消操作
        } else {
            pending.splice(pending.indexOf(flagUrl), 1);//把这条记录从数组中移除
        }
    } else {
        if (f) {
            pending.push(flagUrl);
        }
    }
}
/* request拦截器 */
service.interceptors.request.use((config: any) => {
    // neverCancel 配置项,允许多个请求
    if (!config.neverCancel) {
        // 生成cancelToken
        config.cancelToken = new CancelToken((c: any) => {
            removePending(config, c);
        });
    }
    // 在这里可以统一修改请求头,例如 加入 用户 token 等操作
    //   if (store.getters.sessionId) {
    //     config.headers['X-SessionId'] = getSessionId(); // 让每个请求携带token--['X-Token']为自定义key
    //   }
    return config;
}, (error: any) => {
    Promise.reject(error);
});

 /* respone拦截器 */
 service.interceptors.response.use(
    (response: any) => {
        // 移除队列中的该请求,注意这时候没有传第二个参数f
        removePending(response.config);
        // 获取返回数据,并处理。按自己业务需求修改。下面只是个demo
        const res = response.data;
        if (res.code !== 200) {
            if (res.code === 401) {
                if (location.hash === '#/') {
                    return res;
                } else {
                    location.href = '/#/';
                }
            }
            return Promise.reject('error');
        } else {
            return response;
        }
    },
    (error: any) => {
        // 异常处理
        console.log(error)
        pending = [];
        if (error.message === '取消重复请求') {
            return Promise.reject(error);
        }
        return Promise.reject(error);
    },
);

export default service;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值