[JavaScript知识库]CancelToken与interceptors实现请求取消

一. 碰到这样的业务场景：

多次触发查询按钮时，取消其他查询请求，只保留最后一个。如果涉及到图表展示的，逻辑会稍需要一些处理，比如点击查询，显示loading，请求回来后，有数据则展示数据，无数据或者返回错误信息则显示未查到相关数据。

二、vue项目的实现方式

1. 取消请求：

if (this.cancelRequest){
    this.cancelRequest()      //取消前一个请求
}
let CancelToken = axios.CancelToken    
this.$axios({
    method: 'post',
    url: '/login/login',
    params: obj,
    cancelToken: new CancelToken((c)=>{
       this.cancelRequest = c    //保存当前请求
    })
}).then((res)=>{
    if(!res)return;       //如果res被拦截，则不处理
    //业务逻辑
}).catch((res)=>{
    this.loading = false
})

2. 区分请求返回的错误信息.

如果是取消请求导致的，则一直处于loading状态，如果返回错误信息，则关闭loading,显示未查到相关数据。
怎么区分错误信息呢，axios有一个方法isCalcel可以判断是不是由取消请求导致的错误信息。
代码如下：

axios.interceptors.reaponse.use((res)=>{
   //请求拦截的代码
},(err)=>{
    if(!axios.isCancel(err) {  //只拦截取消请求导致的错误信息
        return err             //这里如果没有return,响应回调函数里的res为undefined
    })
})