JS中如何使用async與await

小編給大家分享一下JS中如何使用async與await，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、async

async創(chuàng)建一個異步函數(shù)來定義一個代碼塊，在其中運行異步代碼;

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

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

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

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

二、await:

await 只在異步函數(shù)里面才起作用。它可以放在任何異步的，關(guān)鍵字 await 讓 JavaScript 引擎等待直到 promise 完成并返回結(jié)果。在等待promise的同時，其他正在等待執(zhí)行的代碼就有機會執(zhí)行了。

您可以在調(diào)用任何返回Promise的函數(shù)時使用 await，包括Web API函數(shù)。

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

注意：await 實際上會暫停函數(shù)的執(zhí)行，直到 promise 狀態(tài)變?yōu)?完成，然后以 promise 的結(jié)果繼續(xù)執(zhí)行。這個行為不會耗費任何 CPU 資源，因為 JavaScript 引擎可以同時處理其他任務：執(zhí)行其他腳本，處理事件等。

三、綜合應用

有了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”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！