今回は「asyncとawait」についての備忘録です。
1:「asyncとawait」とは？
・【Promiseを更に「直感的に、簡単に」】記述できるようにしたものです。
1-1:「async」について。
⬇︎
・「async」とは、【Promiseを返却する関数】です。
・「関数の先頭にAsync」と付いていた場合には【必ずPromiseが返ってくる】ことが担保されています。
・「Asyncを付けた関数(下記の例ならinit関数)」というのはこのinit関数自体も【Promiseのインスタンスを返します。】 下記の例ではconsole.log(init());とすると、Promiseが入っていることが分かります。
⬇︎
//⬇︎asyncで【Promiseを返却する関数】を定義する。
async function init() {
//ここに処理
}
console.log(init()); //コンソール結果➡︎ これだけでも Promise {<fulfilled>: undefined が格納されている。
//⬆︎つまりこのinit関数自体も【Promiseのインスタンスを返します。】
1-2:「await」について。
・「await」はPromiseを返却する関数の【非同期処理が完了するのを待って、次の処理に移行するように制御をかける。】
・【awaitで受け取る】ということ。
⬇︎
//⬇︎asyncで【Promiseを返却する関数】を定義する。
async function init() {
await sleep(0); //awaitで受け取る。
}
2: await が使われてるなら、「asyncを必ず付けよう。」
・例として定義した関数init()の中で、
awaitが使用されている場合には、定義した関数init()は必ず非同期処理されることになる。
⬇︎
・なので呼び出し元の関数init()自体にも、
この関数は、非同期処理されるということを伝えてあげる必要があります。
⬇︎
⭕️【awaitが関数コンテキスト内で使われているなら、asyncを必ず付けよう。】
async function init() {
await sleep(0); //awaitが付いているなら関数initには、asyncを付ける。
}
3: 実際にコードで触れてみる。
実践1: async/awaitを使って【Promiseのチェーンを行ってみます。】
コンソールに0, 1, 2, 3, 4...の結果を表示させる。
//⬇︎sleep関数（Promiseで非同期処理を定義。）
function sleep(val) {
return new Promise(function (resolve) {
//⬇︎1秒後にsetTimeoutでconsoleに数字を表示する非同期処理。
setTimeout(function () {
console.log(val++); //コンソール結果: 0,1,2,3...
resolve(val); // resolveで次の処理に移行するように制御を加えることができます。
// 次のawaitに「引数val」が渡っていく。
}, 1000);
});
}
//⬇︎asyncで【Promiseを返却する関数】を定義する。
async function init() {
let val = await sleep(0); //⬅︎await sleep(0);が「実行された結果を、変数valに代入。」
console.log(val); //⬅︎コンソール結果: 1
val = await sleep(val); //⬅︎次々とチェーン処理されていく。
val = await sleep(val);
val = await sleep(val);
val = await sleep(val);
}
//⬇︎init関数を実行する。
init();
⬇︎
すると「async/awaitを使ってpromiseチェーン」が作成できます。
これがasyncとawait。
⬇︎
個人的に「Promise」と「asyncとawait」はゴチャゴチャになってしまうことがあるので、こうして忘れたとき用に見返すと良い。(人の脳なのでしょうがないですね…)
実践2: asyncで定義した関数自体にも、Promiseのインスタンスが返却されます。ということはthenで繋げた処理もできる。やってみる。
//⬇︎sleep関数（Promiseで非同期処理を定義。）
function sleep(val) {
return new Promise(function (resolve) {
setTimeout(function () {
console.log(val++); //コンソール結果: 0
resolve(val);
}, 1000);
});
}
//⬇︎asyncで【Promiseを返却する関数】を定義する。
async function init() {
let val = await sleep(0);
val = await sleep(val);
val = await sleep(val);
val = await sleep(val);
val = await sleep(val);
return val; //⬅︎「return val」を設定するとthen(function(val)に「valが渡っていく。」
}
//⬇︎init関数を実行する。
init().then(function (val) {
console.log('hello ' + val); //⬅︎コンソール結果は、init()の結果0,1,2,3,4が表示されてから【その後に文字列"hello 5"が表示される。】
});
⬇︎
・「.then」を繋げてPromiseの非同期処理ができました。
・もちろん「.catch」のエラー処理も可能です。
4: 今回の備忘録でした。
メモ：積極的に使ってawaitとasyncに慣れる！
以上です。