async-await.js
まじで何もわからんので自分の言葉で整理するところから。今「完全に理解した」の状態、どうせここからわからなくなる async functionの作り方
code:script.js
async function example() {}
const asyncFn = async (expr) => {};
だいたい関数の直前にasyncって書けば作れる
async functionの特徴
async functionはPromiseを返す
async function内のreturn xはresolve(x)に読み替え
async function内のthrow xはreject(x)に読み替え
code:script.js
const asyncFn = async n => {
return n * 2;
};
asyncFn(10).then((v) => { // asyncFn(10)の評価がPromiseになるのでthenが使える
console.log(v); // Expected Output : 20
});
await演算子
async functionの中ならPromise待機演算子「await」が使える
await xはxを(必要に応じて)Promiseに変換し、そのPromiseが完了するまでasync functionの続きの実行を止める効果を持つ
ということはthenを繋がなくてもPromiseチェーンが作れるな?(←ここ本質)
code:script.js
const fetchAsync = async url => {
const response = await fetch(url); // fetchはPromiseなので実行完了を待機
if (response.ok) {
return await response.text(); // なんならこういうことをしてもいい
} else {
throw new Error(response.status);
}
}
// Expected Output : 技研HP404画面のHTMLソース(axtech.devで実行しないとCORSエラーが出る可能性大)