JS中如何使用async與await

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

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