axios防重复提交

场景

用户在进行新增操作(比如新增菜单)。如果快速点击多次新增按钮,可能照成的情况就是新增了多条记录。一般可以通过在点击的时候,先禁用新增按钮,然后等本次操作完了,再解除禁用。不过,使用axios有更加优雅的实现方式。

axios防重复提交

思路

先说下思路:在进行axios提交操作的时候,把本次请求做一个标记,保存到一个数组中。等请求结束了,就从这个数组中,移除请求标记。所以,如果有两个完全一样的请求过来,那么后来的请求,就会发现在这个数组中,已经有了该标记,那么就在axios中取消本次请求。

具体实现

在我的代码中,已经对axios进行了统一的封装在http.js中了,所以,只需要在http.js中实现就好了:
首先定义一个数组来存请求标记,以及定义一个取消axios请求的对象:

// 请求列表(防重复提交)
let requestList = [];
let cancelToken = axios.CancelToken;

然后确定请求标记:这里我采用的就是请求的url+请求参数+请求方式,组合成一个字符串,作为请求标记,在request拦截器中,代码如下:

axios.interceptors.request.use(
    config => {

        //防止重复提交(如果本次是重复操作,则取消,否则将该操作标记到requestList中)
        config.cancelToken = new cancelToken((cancel) => {
            let requestFlag = JSON.stringify(config.url) + JSON.stringify(config.data) + '&' + config.method;
            if (requestList.includes(requestFlag)) {//请求标记已经存在,则取消本次请求,否则在请求列表中加入请求标记
                cancel();//取消本次请求
            } else {
                requestList.push(requestFlag);
            }
        });

        return config;
    },
    error => {
        return Promise.reject(err);
    }
);

最后,在请求结束中,请请求标记移除,在response拦截器中,代码如下:

axios.interceptors.response.use(
    response => {
        //请求返回后,将请求标记从requestList中移除
        let requestFlag = JSON.stringify(response.config.url) + JSON.stringify(response.config.data) + '&' + response.config.method;
        requestList.splice(requestList.findIndex(item => item === requestFlag), 1);

        return response;
    },
    error => {
        //置空请求列表
        requestList.length = 0;
        
        return Promise.reject(error)
    }
)

补充

如果在系统中,真的存在这种两个请求的url、参数、请求方式都一模一样,并且还要在用户的一个操作中向后端请求(我倒是没有遇到过这种情况),这个方式也是有解决方案的。在上面介绍中,请求标记,使用的方式是:url+请求参数+请求方式。那么这个时候在请求参数中,在加一个特别的参数就可以了,当然这个参数只是为了防止重复提交中,请求标记的确定,并没有其他作用。当然,也可以另想一个办法来实现这个请求标记。总之,这种需求,几乎不会出现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值