路由变化时使用axios取消所有请求

原地址:https://www.jianshu.com/p/37be781dc879

最近做项目遇到一个需求,需要在切换路由时,取消当前所有未完成的请求,隐约记得axios中有cancelToken这么一个东东(https://github.com/axios/axios),二话不说就是干,axios文档如下:

image

从文档中可知,有两种取消请求的方法,另外还声明可以使用同一个cancel token取消多个请求。于是我就照猫画虎,写出下列代码:

// 配置请求
const CancelToken = axios.CancelToken
const source = CancelToken.source()
store.requestCancel = source.cancel // 保存到全局变量,用于路由切换时调用
const http = axios.create({
    cancelToken: source.token
})

// 路由切换
router.beforeEach((to, from, next) => {
    store.requestCancel && store.requestCancel()
    next()
})

心里想着,每个请求都会带上cancelToken,每次切换路由时,在跳转前执行取消请求的操作,完美!!crtl+s, npm start,切换路由,what???切换后的页面请求怎么拿不到数据?各种debugger一调,怎么切换路由后的请求response都没有执行,直接就到catch了?打开Network,显示请求也没有发送,难道执行了cancel函数后,所有的请求都不发送了吗?查看axios源码发现,在lib/adapters/http.js中存在一段代码如下:

if (config.cancelToken) {
    config.cancelToken.promise.then(functiion onCanceled(cancel) {
        if (aborted) {
            return;
        }
      req.abort();
      reject(cancel);
      aborted = true
    });
}

大致的意思就是说如果请求的配置中存在cancelToken,并且该cancelToken中存在promise的话就执行then方法,由于在上述代码中,在切换路由前执行了source.cancel方法,并且在所有的请求中配置的是同一个cancelToken,所以在之后的所有请求都会直接执行onCanceled方法,从而abort请求。

知道了缘由,接下来的工作就很简单啦,直接上修改后的代码:


// 配置发送请求拦截器

http.interceptors.request.use(config => {
    config.cancelToken = store.source.token
    return config
}, err => {
    return Promise.reject(err)
})

router.beforeEach((to, from, next) => {
    const CancelToken = axios.CancelToken
    store.source.cancel && store.source.cancel()
    store.source = CancelToken.source()
    next()
})

// 全局变量

store = {
    source: {
        token: null,
        cancel: null
  }
}

先后的变化就是每次路由变化前,执行cancel方法并且更新cancelToken。

初次写文章,请多指教!!



作者:sunshineLWZL
链接:https://www.jianshu.com/p/37be781dc879
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值