vue中axios非同步呼叫介面的坑

測試生財發表於2020-12-11
VueiOS非同步

背景

最近在寫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

相關文章