JS中的async與await怎么使用

更新時(shí)間：2021年12月29日 11:23:05 作者：前端老實(shí)人

這篇文章主要介紹了JS的async/await怎么使用,簡(jiǎn)單來(lái)說(shuō)，async/await是基于promises的語(yǔ)法糖，使異步代碼更易于編寫(xiě)和閱讀,下面來(lái)看詳細(xì)的介紹內(nèi)容吧。需要的小伙伴也可以參考一下

一、async

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

怎樣變成異步函數(shù)呢？以 async 這個(gè)關(guān)鍵字開(kāi)始，它可以被放置在一個(gè)函數(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))
//返回值也可以簡(jiǎn)化成這樣
hello().then(console.log)

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

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

二、await:

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

您可以在調(diào)用任何返回Promise的函數(shù)時(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í)際上會(huì)暫停函數(shù)的執(zhí)行，直到 promise 狀態(tài)變?yōu)?完成，然后以 promise 的結(jié)果繼續(xù)執(zhí)行。這個(gè)行為不會(huì)耗費(fèi)任何 CPU 資源，因?yàn)?JavaScript 引擎可以同時(shí)處理其他任務(wù)：執(zhí)行其他腳本，處理事件等。

三、綜合應(yīng)用

有了async/await就去除了到處都是 .then() 代碼塊，因?yàn)?code>await會(huì)等待了。

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('問(wèn)題: ' + e.message);
});

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

到此這篇關(guān)于JS的async/await怎么使用的文章就介紹到這了,更多相關(guān)JS的async/await 用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: