美文网首页
axios 取消请求

axios 取消请求

作者: littleyu | 来源:发表于2020-05-08 10:31 被阅读0次

axios文档里介绍的取消axios请求有以下两种方式:

// 第一种:使用 CancelToken
const { CancelToken, isCanCel } = axios;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(thrown => {
  if (isCancel(thrown)) {
      // 获取 取消请求 的相关信息
    console.log('Request canceled', thrown.message);
  } else {
    // 处理其他异常
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求。
source.cancel('Operation canceled by the user.');

// 第二种:还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

举🌰:切换路由时,取消上个路由的请求。

其实我们的解决方式就是同一个路由下的请求公用一个canceltoken,虽然多个请求会生成多个promise链,但是在adapterPromise局部的cancelToken.promise却是同一个,这样在执行axios.cancelToken.source().cancel方法时候就会作用于全部promise链,一旦cancel一执行,所有未完成的请求都会取消,相对应的promise链都会变为rejected。

初始入口文件中通过axios生成cancelToken:

axios的拦截器的request配置中添加参数cancelToken

一个请求在axios的工作流程,像一个管道一样:

相关文章

  • axios如何取消接口请求

    vue项目,如何在axios中取消已经发送的请求呢? 原生js的abort()这个方法 在axios中取消接口请求...

  • axios 取消请求

    axios文档里介绍的取消axios请求有以下两种方式: 举?:切换路由时,取消上个路由的请求。 其实我们的解决方...

  • axios取消请求?

    前言 最近在项目中遇到一个问题,在连续发送同一请求时,如果第二次请求比第一次请求快,那么实际显示的是第一次请求的数...

  • 防止发起多余http请求的几种方式

    cancelToken 场景: 请求接口数据量过大,结果未返回需要取消接口pending用法:axios取消请求的...

  • 问题总结

    1. 取消axios请求 业务场景:单页应用,希望退出当前页的时候,取消请求 官网: https://github...

  • axios取消请求以及获取文件上传进度

    1. axios取消接口请求[https://segmentfault.com/a/11900000212905...

  • axios-取消请求

    点击cancel函数就可以阻止请求。

  • axios取消指定请求

  • Axios 取消重复请求

    有什么用? 当用户频繁点击在短时间内发送多个 ajax 请求,但是由于网络原因服务器数据无法及时响应返回,这时候,...

  • Axios中取消请求

    在平时的开发过程中,我们会经常遇到菜单切换的问题,在一些切换频率较低的情况下,在切换到另一个页面的时候,上一个页面...

网友评论

      本文标题:axios 取消请求

      本文链接:https://www.haomeiwen.com/subject/cedoghtx.html