axios 取消请求:CancelToken

目录

示例代码：

步骤操作：

优化取消请求（细化错误问题）：

 示例代码：

axios 请求拦截器中使用取消请求：

示例代码：

axios 批量发送请求：

---

注意：此方法（CancelToken），官方已经不推荐，推荐去看官网的方法

示例代码：

  id="btn1">点我获取测试数据
  id="btn2">取消请求
  

步骤操作：

1.首先定义一个 CancelToken 来接收 axios 中 CancelToken 主要是为了’打标识

const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’

2.然后定义一个 cancel 变量 

let cancel;

3.在 axios 对象中配置 cancelToken： 

cancelToken: new CancelToken((c)=>{ //c是一个函数，调用c就可以关闭本次请求 cancel 的缩写
  cancel = c;//赋值给外面的变量cancel 提升c的作用域？
})

4.最后绑定在某个事件发生后想取消请求时调用：

//笔记中所写的事件为点击事件 任何事件都可以
btn2.onclick = () =>{
  cancel();
}

 

优化取消请求（细化错误问题）：

说明：点击取消请求时，axios也会去失败的回调，但这不是服务器的错误导致的，是用户自身不需要本次请求，所以需要对于错误进行划分。以及如果用户反复点击，会发出多次请求，单只需要一次请求。

 示例代码：

  id="btn1">点我获取测试数据
  id="btn2">取消请求
  

解释：cancel 函数可在括号中添加说明，在进入失败的回调时进行判断是服务器端发出的，还是用户自己取消的。

axios 请求拦截器中使用取消请求：

示例代码：

 

  id="btn1">点我获取测试数据
  id="btn2">取消请求
  

axios 批量发送请求：

使用了axios.all( ) 的API，括号中为数组，其中写需要并发的请求。

 

  id="btn1">点我获取测试数据
 
  

解释：Axios.all( ) 基于 promise.all( )，所有的都是成功的回调才会返回数据，如果有一个失败的回调，就会走错误信息。此方法会按顺序打印 并发的三个请求的数据，并且如果用了延迟请求也会是原本的顺序，这是 axios 封装好的。