JavaScript 非同步呼叫實例分析-js教程-PHP中文網

JavaScript 非同步呼叫實例分析

小云云

發布： 2018-01-22 09:28:13

原創

1369 人瀏覽過

本文主要透過一個小小題目逐步走進javascript 非同步呼叫問題，本文附有解答過程，有興趣的朋友一起看看吧，希望能幫助大家更好掌握JavaScript 非同步呼叫。

問題

可修改下面的aa() 函數，目的是在一抄後用console.log() 輸出want-value

function aa() {
  setTimeout(function() {
    return "want-value";
  }, 1000);
}

登入後複製

但是，有額外要求：

aa() 函數可以隨意修改，但是不能有console.log()

執行console.log()語句裡不能有setTimeout 包裹

答案

也許這是面試題，管它呢。問題的主要目的是考察對非同步調用執行結果的處理，既然是非同步調用，那麼不可能同步等待非同步結果，結果一定是異步的

setTimeout() 經常用來模擬非同步操作。最早，非同步是透過回呼來通知（呼叫）處理程序處理結果的

function aa(callback) {
  setTimeout(function() {
    if (typeof callback === "function") {
      callback("want-value");
    }
  }, 1000);
}
aa(function(v) {
  console.log(v);
});

登入後複製

不過回呼在用於稍大型一點的非同步應用時，容易出現多層嵌套，所以之後提出了一些對其進行“扁平”化，這一部分可以參考閒聊異步調用“扁平”化。當然 Promise 是非常流行的一種方法，並最終被 ES6 採納。用Promise 實作如下：

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
aa().then(v => console.log(v));

登入後複製

就這個例子來說，它和前面回呼的例子大同小異。不過它會引出目前更推薦的一種方法－async/await，從ES2017 開始支援：

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
async function main() {
  const v = await aa();
  console.log(v);
}
main();

登入後複製

aa() 的定義與Promise 方法中的定義是一樣的，但是在呼叫的時候，使用了await ，非同步等待，等待到非同步的結果之後，再使用console.log() 對其進行處理。

這裡要注意的是 await 只能在 async 方法中使用，所以為了使用 await 必須定義一個 async 的 main 方法，並在全域作用域中呼叫。由於 main 方法是異步的（申明為 async)，所以如果 main() 呼叫之後還有其它語句，例如 console.log("hello") ，那麼這句話會先執行。

async/await 語法讓非同步呼叫寫起來像寫同步程式碼，在寫程式碼的時候，可以避免邏輯跳躍，寫起來會更輕鬆。（參考：從地獄到天堂，Node 回呼向async/await 轉變）

當然，定義main() 再呼叫main() 這部分可以用IIFE 封裝一下，

(async () => {
  const v = await aa();
  console.log(v);
})();

登入後複製