簡單來說，async/await是基于promises的語法糖，使異步代碼更易于撰寫和閱讀，
一、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()塊來封裝代碼，同時它看起來很像同步代碼，所以它非常直觀，這樣用的很爽！
想了解更多常用異步？點擊下列藍色字體學習哦！
1.Promise如何使用？全方位決議，一篇搞懂異步
2.讓你五分鐘搞懂，錯誤處理try..catch...finally的文章，涵蓋throw，TypeError，RangeError，SyntaxError解釋
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297166.html
標籤：其他
下一篇：微信小程式入門知識點匯總