vue的axios取消请求

羅森林

已于 2022-08-11 17:24:59 修改

阅读量4.6k

点赞数 4

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-05-18 10:53:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37866866/article/details/124837809

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用axios库中的CancelToken来取消HTTP请求，包括通过source工厂方法和executor函数创建CancelToken。重点讲解了在get和post请求中如何配置cancelToken，以及在请求被取消时如何捕获错误并显示取消原因。此外，还提醒了注意点，如请求取消时机和不同请求类型的cancelToken位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios取消请求

axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式

1.使用 CancelToken.source 工厂方法创建cancel token

CancelToken有一个source静态方法，调用之后返回一个对象，该对象包含一个token属性用于标记请求和一个cancel方法用于取消请求

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
     axios.get('http://localhost:6003/axios/4',{
        cancelToken: source.token
      }).then(function(res) {
            console.log(res.data);
          })
    source.cancel('不想请求了');

2.通过传递一个 executor 函数到 CancelToken 的构造函数创建cancel token

axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里面的方法即可取消多个请求。

    let arr = [];
    const CancelToken = axios.CancelToken;
     axios.get('http://localhost:6003/axios/4',{
        cancelToken: new CancelToken(function executor(c){
            arr.push(c);
            //cancel = c;
        })
      }).then(function(res) {
            console.log(res.data);
          })
      axios.get('http://localhost:3000/axios/3',{
        cancelToken: new CancelToken(function executor(c){
            arr.push(c);
            //cancel = c;
        })
      }).then(function(res) {
            console.log(res.data);
          })
      for (let i = 0; i < arr.length; i++) {
        arr[i]('请求取消');
      }

注意点1：
cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去，这样请求在被取消之后会被catch捕获，你可以在这里将取消原因打印出来或者提示给用户，比如提示用户不要频繁点击发送请求

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
     axios.get('http://localhost:6003/axios/4',{
        cancelToken: source.token
      }).then(function(res) {
            console.log(res.data);
          }).catch(function(err) {
            if (axios.isCancel(err)) {
              console.log(err.message);
            }
          })
      source.cancel('不想请求了');

注意点2：
get的cancelToken放置在第二个参数的对象里面，post的cancelToken放置在第三个参数对象里面

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    axios.post('http://localhost:6003/axios',{
                username: 'lisi',
                content: 123
            },{
                headers:{
                    "Content-Type": "application/json"
                 },
                 cancelToken: source.token
               }

               ).then(function(ret){
                console.log(ret.data);
            })
      source.cancel('不想请求了');