JS中的async與await怎麼使用

Posted on by

一、async

async創建一個異步函數來定義一個代碼塊，在其中運行異步代碼;

怎樣變成異步函數呢？以 async 這個關鍵字開始，它可以被放置在一個函數前面

async function f() {
  return 1;
}
 
f().then(alert); // 1
 
//上下結果一樣
 
async function f() {
  return Promise.resolve(1);
}
 
f().then(alert); // 1
 
//也可以用箭頭函數
let hello = async () => { return "1" };
hello().then((value) => console.log(value))
//返回值也可以簡化成這樣
hello().then(console.log)

異步函數的特征之一：保證函數的返回值為 promise。

將 async 關鍵字加到函數申明中，可以告訴它們返回的是 promise，而不是直接返回值。此外，它避免瞭同步函數為支持使用 await 帶來的任何潛在開銷。

二、await:

await 隻在異步函數裡面才起作用。它可以放在任何異步的，關鍵字 await 讓 JavaScript 引擎等待直到 promise 完成並返回結果。在等待promise的同時，其他正在等待執行的代碼就有機會執行瞭。

您可以在調用任何返回Promise的函數時使用 await，包括Web API函數。

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("咚!"), 1000)
  });
 
  let result = await promise; // 等待執行，直到 promise resolve 執行完
 
  alert(result); // "咚!"
}
 
f();//拿到 result 作為結果繼續往下執行。所以上面這段代碼在1秒後顯示 “咚!”。

註意：await 實際上會暫停函數的執行，直到 promise 狀態變為 完成，然後以 promise 的結果繼續執行。這個行為不會耗費任何 CPU 資源，因為 JavaScript 引擎可以同時處理其他任務：執行其他腳本，處理事件等。

三、綜合應用

有瞭async/await就去除瞭到處都是 .then() 代碼塊，因為await會等待瞭。

async function A() {
  let response = await fetch('c.jpg');
  let myBlob = await response.blob();
 
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}
 
A()
.catch(e => {
  console.log('問題: ' + e.message);
});

用更少的.then()塊來封裝代碼，同時它看起來很像同步代碼，所以它非常直觀。這樣用的很爽！

到此這篇關於JS的async/await怎麼使用的文章就介紹到這瞭,更多相關JS的async/await 用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：