[JS] Async / Await 小筆記
前一天的筆記簡單記錄了 Promise 要怎麼使用,現在來補一下 Async / Await。
本來的 Promise 是接著使用 then
語法, 那 Async 和 Await 要怎麼用呢?
簡單來說就是要先創 Async 類型的 function,然後在裡面使用 Await 等待呼叫的 function。
當然 Await 要呼叫的 function 也必須是一個 Promise。
const printData = async () => {
console.log("Start to get data.");
const data = await getData();
console.log(data.json());
};
printData();
下面還有一個 ES5 的例子,比較了用 then
和 await
:
async function wait(i, time = 1000) {
return new Promise((resolve, reject) => {
setTimeout(v => resolve(i), time);
})
}
//async with then
(async function() {
let res = await wait('wait 1 sec');
console.log(res);
return res;
})().then(async function() {
let res = await wait('wait 2 sec', 2000);
console.log(res);
return res;
})
//pure await
(async function() {
var res = await wait('wait 1 sec');
console.log(res);
res = await wait('wait 2 sec', 2000);
console.log(res);
})()
Reference
-
https://jigsawye.com/2016/04/18/understanding-javascript-async-await/
-
https://mlwmlw.org/2016/03/es7-%E7%9A%84-async-await-%E5%85%A5%E9%96%80/
-
https://gist.github.com/clonn/7e1f4d9c1bc370881521b770935ead3d