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調用接口的和業務邏輯處理的時間）

博主：測試生財

座右銘：專一測試與自動化，致力提升研發效能；經過測試精進完成原始積累，經過讀書理財奔向財務自由。

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

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

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