vue中axios异步调用接口的坑

背景

最近在写vue项目的时候遇到一个axios调用接口的坑，有个前端模块涉及axios去调用多个接口，然后请求完获取数据之后，再使用windows.location.href重定向到新页面，这时候却发现axios请求的接口都是出于canceled的状态。

例如：

axios.get('/url1')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
axios.get('/url2')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  windows.location.href="/

如果是这么写的话，由于axios调用接口是异步的，极有可能在url1和url2还没请求完毕的时候，windows.location.href就被执行了。这时在当前页面打开一个新的页面，而通过chrome的f12控制台查看url1和url2请求都是处于canceled状态。

StackOverflow网上查的canceled解释如下：

1.The DOM element that caused the request to be made got deleted (i.e. an IMG is being loaded, but before the load happened, you deleted the IMG node)

2.You did something that made loading the data unnecessary. (i.e. you started loading a iframe, then changed the src or overwrite the contents)

3.There are lots of requests going to the same server, and a network problem on earlier requests showed that subsequent requests weren’t going to work (DNS lookup error, earlier (same) request resulted e.g. HTTP 400 error code, etc)

简单来说，就是元素或者请求还未完成的时候，被打断了。

解决方法

这里有两个方法：第一个就是直接把windows.location.href包裹在axios请求完成的处理流程里。如下面：

axios.get('/url1')
  .then(function (response) {
    axios.get('/url2')
      .then(function (response) {
        windows.location.href="/" 
      })
    .catch(function (error) {
        console.log(error);
    });
  })
  .catch(function (error) {
    console.log(error);
  });

这么做的好处就是只有等到url1和url2都请求成功后，页面才会跳转。但是有个新的问题，如果要多次请求url1和url2之后再进行跳转该怎么写？例如：

for（循环）
{
axios.get('/url1')
      .then(function (response) {
        axios.get('/url2')
          .then(function (response) {
            
          })
        .catch(function (error) {
            console.log(error);
        });
      })
.catch(function (error) {
        console.log(error);
   });
}
windows.location.href="/" 

如果是这样的话，axios请求可能还没完成就跳转了。axios是异步的，所以windows.location.href有可能先于axios执行完。

在这里有个取巧的方法，使用定时器来延时windows.location.href的执行时机。

setTimeout(function() {
    windows.location.href="/" 
}, 2000);

这样写，基本可以保证windows.location.href在axios之后执行（取决于axios调用接口的和业务逻辑处理的时间）

传送门：2021最新测试资料与大厂招聘合集

博主：测试生财（一个不为996而996的测开码农）

座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。

内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公众号：测试生财（定期分享独家内容和资源）