2021-05-12 14:32:11
非同步程式設計新方式async/await
2020-10-15 16:00:10
一、前言
實際上對async/await並不是很陌生，早在阮大大的ES6教學裡面就接觸到了，但是一直處於理解並不熟練使用的狀態，於是決定重新學習並且總結一下，寫了這篇博文。如果文中有錯誤的地方還請各位批評指正！
二、介紹async/await
1.async/await 是非同步程式碼的新方式
2.async/await 基於 Promise 實現
3.async/await使得非同步程式碼更像同步程式碼
4.await 只能用在 async 函數中，不能用在普通函數中 await 關鍵字後面必須跟 Promise 物件 函數執行到 await 後，Promise 函數執行完畢，但因為 Promise 內部一般都是非同步函數，所以事件迴圈會一直 等待，直到事件輪詢檢查到 Promise 有了狀態 resolve 或 reject 才重新執行這個函數後面的內容
三、特點
async函數ES2017標準引入的語法，是Generator函數的語法糖，因此其相對於Generator函數，具有以下基本特點。
內建執行器： 使用async函數可以像使用普通函數一樣，直接呼叫即可執行。不用像Generator函數一樣使用co模組來實現流程控制。
語意化更強： async關鍵字表示是一個非同步的函數，await表示需要等待執行。相對於yield表示式，語意化更強。
返回值是Promise： async函數返回值是Promise物件，這比Generator函數的返回值是Iterator物件方便多了，可以使用then方法來指定下一步的操作。
四、基本用法
1.async函數的返回值
async函數返回一個 Promise 物件，async函數內部return語句返回的值，會成為then方法回撥函數的引數。當函數執行的時候，一旦遇到await就會先返回，等到非同步操作完成，再接著執行函數體內後面的語句。
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
上面程式碼中，函數f內部return命令返回的值，會被then方法回撥函數接收到。
async函數內部丟擲錯誤，會導致返回的 Promise 物件變為reject狀態。丟擲的錯誤物件會被catch方法回撥函數接收到。
async function f() {
throw new Error('出錯了');
}
f().then(
v => console.log('resolve', v),
e => console.log('reject', e)
)
//reject Error: 出錯了
2.Promise的狀態變化
async函數返回的 Promise 物件，必須等到內部所有await命令後面的 Promise 物件執行完，才會發生狀態改變，除非遇到return語句或者丟擲錯誤。也就是說，只有async函數內部的非同步操作執行完，才會執行then方法指定的回撥函數。
async function getTitle(url) {
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([sS]+)</title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"
上面程式碼中，函數getTitle內部有三個操作：抓取網頁、取出文字、匹配頁面標題。只有這三個操作全部完成，才會執行then方法裡面的console.log。
3.await命令
如果await命令後面是一個 Promise 物件，返回該物件的結果。如果不是 Promise 物件，就直接返回對應的值。
async function f() {
// 等同於
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
如果await命令後面是一個thenable物件（即定義了then方法的物件），那麼await會將其等同於 Promise 物件。
class Sleep {
constructor(timeout) {
this.timeout = timeout;
}
then(resolve, reject) {
const startTime = Date.now();
setTimeout(
() => resolve(Date.now() - startTime),
this.timeout
);
}
}
(async () => {
const sleepTime = await new Sleep(1000);
console.log(sleepTime);
})();
// 1000
如果await命令後面的 Promise 物件變為reject狀態，則reject的引數會被catch方法的回撥函數接收到。
async function f() {
await Promise.reject('出錯了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出錯了
任何一個await語句後面的 Promise 物件變為reject狀態，那麼整個async函數都會中斷執行。
async function f() {
await Promise.reject('出錯了');
await Promise.resolve('hello world'); // 不會執行
}
為了避免一些不必要的麻煩，建議把await放入try—catch中
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一種寫法
async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}
4.總結
（1）async函數內部的非同步操作執行完，根據其執行的狀態，對應執行then或catch
（2）遇到await就會先返回，等到非同步操作完成，再接著執行函數體內後面的語句。
（3）任何一個await語句後面的 Promise 物件變為reject狀態，那麼整個async函數都會中斷執行。
五、實現原理
async 函數的實現原理，就是將 Generator 函數和自動執行器，包裝在一個函數裡。【Generator可以理解為一個狀態機，內部封裝了很多狀態，同時返回一個迭代器Iterator物件。可以通過這個迭代器遍歷相關的值及狀態。 Generator的顯著特點是可以多次返回，每次的返回值作為迭代器的一部分儲存下來，可以被我們顯式呼叫。】
async function fn(args) {
// ...
}
// 等同於
function fn(args) {
return spawn(function* () {
// ...
});
}
所有的async函數都可以寫成上面的第二種形式，其中的spawn函數就是自動執行器。下面給出spawn函數的實現
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(undefined); });
});
}
六、注意事項
1.await只能使用在async函數內部，在普通函數中使用會報錯
2.任何一個await語句後面的 Promise 物件變為reject狀態，那麼整個async函數都會中斷執行。最好將其放入try—catch中
3.在某些場景下並不適合使用await，會增加頁面互動時間，要合理利用
參考檔案：https://es6.ruanyifeng.com/#docs/async
http://www.vsoui.com/2018/06/07/async-await-function/
https://blog.csdn.net/juhaotian/article/details/78934097
相關文章