asyncとawait - 駆け出しのエンジニア日記

async

簡単に説明すると、非同期な処理をスッキリと書ける構文です。

async function () {
　　　　　〜〜〜
}

functionの前に「async」とつけるだけです。これで非同期処理を実行できる関数を定義したことになります。

・asyncな関数は必ずPromiseを返します。

・関数が値を返せば、Promiseはその値でresolveします。

・関数がエラーをthrowした場合はPromiseはそのエラーでrejectします。

そしてアロー関数においても上記と同じ宣言をしたい場合、エラー処理をしたい場合、thenを用いて記述したい場合は下記のように記述できます。

　　// アロー関数で記述
const sing = async () => {
 throw new Error('エラー');　　　//エラー処理の記述
 return 'あああああああ';
}
sing()
 .then*1
 .then*2
 .then*3
 .then*4
 .then*5
 .then*6
 .then*7

下記のようにさらにすっきり記述できます。

//async/awaitで記述してみる
async function rainbow() {
 await delayedColorChange('red', 1000);
 await delayedColorChange('orange', 1000);
 await delayedColorChange('yellow', 1000);
 await delayedColorChange('green', 1000);
 await delayedColorChange('blue', 1000);
 await delayedColorChange('indigo', 1000);
 await delayedColorChange('violet', 1000);
}
rainbow();

最後に、

「asyncとawait」を用いてrejectされる場合を確認してみます。

サンプルとして、4秒を過ぎた場合はエラーになるプログラムを用意します。

const fakeRequest = (url) => {
 　　　　　　　　return new Promise*8 + 500;
 　　　　　　　　　　　　　　　　　　setTimeout(() => {
 　　　　　　　　　　　　　　　　　　　　　　if (delay > 4000) {
 　　　　　　　　　　　　　　　　　　　　　　　　　　　reject('コネクションタイムアウト')
 　　　　　　　　　　　　　　　　　　　　　　} else {
 　　　　　　　　　　　　　　　　　　　　　　　　　　　resolve(`ダミーデータ(${url})`)
 　　　　　　　　　　　　　　　　　　　　　　}
 　　　　　　　　　　　　　　　　　}, delay)
 　　　　　　　　})
}

async function makeRequest() {
 　　　　　　//rejectの場合はtry&catchを使う
 try {
 　　　　　　　　　　　　　//resolveの場合、変数に代入すればOK
　　　　　　　　　　　　　 let data1 = await fakeRequest('/hoge1');
 　　　　　　　　　　　　　　console.log(`data1: ${data1}`);
 } catch (error) {
 　　　　　　　　　　　　　　console.log('エラー発生');
 　　　　　　　　　　　　　　console.log(error);
 　　　　　　　　　　　　　　　}
　}
makeRequest();