JavaScript 異步調用

更新時間：2017年10月25日 11:18:51 投稿：mrr

本文通過一個小小題目逐步走進javascript 異步調用問題，本文附有解答過程，感興趣的朋友一起看看吧

問題

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

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

但是，有額外要求：

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

執(zhí)行 console.log() 語句里不能有 setTimeout 包裹

解答

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

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

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

不過回調在用于稍大型一點的異步應用時，容易出現(xiàn)多層嵌套，所以之后提出了一些對其進行“扁平”化，這一部分可以參考閑談異步調用“扁平”化。當然 Promise 是非常流行的一種方法，并最終被 ES6 采納。用Promise 實現(xiàn)如下：

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") ，那么這一句話會先執(zhí)行。

async/await 語法讓異步調用寫起來像寫同步代碼，在編寫代碼的時候，可以避免邏輯跳躍，寫起來會更輕松。（參考：從地獄到天堂，Node 回調向 async/await 轉變）

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

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

總結

以上所述是小編給大家介紹的JavaScript 異步調用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 異步調用

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具