axios取消请求需求场景和介绍

1,737 阅读2分钟

「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

需求前提

防抖: 开发过程中,用户快速地交互过程中,只使用最后一次交互产生的数据,然后再发起请求,例如频繁的切换 tab,或者快速输入数据,或者在导出文件或下载文件时,中途需要取消操作时等。这些都需要对接口请求的时机或者请求接口之后进行处理,避免一些无用的请求或者接口返回顺序的差异。

如果我们不处理这些未完成的请求,那么这些请求会极大的影响页面的性能,甚至导致之后的请求超时。

锁状态: 在上一个接口没有返回数据时,交互状态一直处于 loading 的锁定状态,直到数据正确返回或者超时等异常;

取消上一个请求: 在发起下一个请求前,把之前的请求取消掉;

前两种方式,是在发起请求前进行控制,当请求发出之后则不再控制;最后一种方式则是取消中断还在路上的请求,然后再发起一个新的请求,不用管发起的时机。

在Vue的开发过程中,大多是使用axios来发起http请求,那么在axios中我们要怎么中止某个http请求呢?那就看看axios官网给出的方案吧。果然,axios提供了CancelToken来取消发起的请求。

使用方法

  1. 添加配置对象的属性;
  2. 声明全局变量;
  3. 将c的值赋值给cancel;
  4. 执行取消请求;
let cancel = null;
btn.onclick = function() {
    axios({
        methods:  'GET',
        url: '',
        cancelToken: new axios.CancelToken(function(c) {
        cancel = c;
        }).then(res =>  {
        console.log(res)
        })
    })
}

防止多次发送请求

点击发送请求时,若数据还没有返回再次点击请求,会增加服务器压力,因此,要判断上一次请求是否完成。

未完成--------取消上一次请求; 完成--------- 返回数据;

btns[0].onclick = function() {
       // 检测上一次请求是否完成
        if(cancel !== null) {
        // 取消上一次请求
            cancel();
        }
        axios({
            methods: 'GET',
            url: 'http://localhost:3000/posts',
            cancelToken: new axios.CancelToken(function(c) {
                    cancel = c;
            })
        }).then(res => {
            cancel = null;
        })
},