JavaScript asyncとawaitのサンプルです。
目次
サンプル | asyncとawaitとは |
Promiseを使用したサンプル | |
asyncを使用+resolved(解決した)を返す | |
asyncを使用+rejected(却下された)を返す | |
awaitで処理を制御する |
asyncとawaitとは
- asyncを関数名の前につけるとその関数はPromiseを返すようになります。
- throwで例外を投げるとrejectedになります。例外がなければfulfilledです。
- awaitは、Promiseがfulfilled(成功)またはrejected(失敗)になるまで処理を待ちます。
- awaitは、asyncが付けられた関数内でのみ実行できます。
- 以下は、MDNの非同期関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
Promiseを使用したサンプル
<script>
function test1() {
return new Promise((resolve) => {
resolve("OK");
});
}
test1()
.then((str1) => {
console.log(str1); // OKが出力される
});
</script>
処理の流れは、7行目から2行目の関数が実行された後に8行目以下が実行されます。
3行目は、Promiseの前にnewがありPromiseオブジェクトを生成しています。
更にその前にreturnがあるので生成されたPromiseオブジェクトを返します。
4行目は、resolveがあるのでPromiseオブジェクトはfulfilled(成功)の状態です。
resolvedの時は8行目のようにthenで受ける必要があります。
asyncを使用+resolved(解決した)を返す
上記のPromiseのコードをasyncを使用したコードに書き換えました。
<script>
async function test1() {
return "ok";
}
test1()
.then((str1) => {
console.log(str1); // OKが出力される
});
</script>
2行目にasyncがあります。
この場合、メソッドの呼び出し元にPromiseはfulfilled(成功)の状態で渡されます。
new Promiseもresolveもありませんが、8行目のようにthenで受けれます。
asyncを使用+rejected(却下された)を返す
<script>
async function test1() {
throw new Error("NG");
}
test1()
.then((str1) => {
console.log("OK"); //出力されない
})
.catch((str1) => {
console.log(str1); // NGが出力される
});
</script>
2行目にasyncがあります。
3行目は、throw文で例外をスローしています。
この場合、メソッドの呼び出し元にPromiseはrejected(失敗)の状態で渡されます。
9行目のcatchで受けて文字列が出力されます。
awaitで処理を制御する
<script>
async function test1() {
console.log("a");
await test2();
console.log("b");
return "ok";
}
function test2() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("test2");
resolve();
}, 1000);
});
}
test1()
.then((str1) => {
console.log(str1); //
})
.catch((str1) => {
console.log(str1); //
});
</script>
4行目は、awaitがあります。呼び先のtest2関数は、settimeoutで1秒待つ設定です。
awaitは、9行目のPromiseの結果を受けるまで待つので処理としては、3,4,5行目と順に実行されます。
4行目のawaitがない場合は、test2関数のsettimeoutで1秒待っている間に、3,5行目が終了し、そのあとに4行目の文字列が出力されます。
以下はawaitがあるときのイメージ図です。3,4,5行目の順に文字列が出力されます。
以下は、awaitがないときのイメージ図です。3,5行目と呼び出し元で文字列が出力された後、4行目の文字列が出力されています。
関連の記事
JavaScript Promiseを使用するサンプル
JavaScript setTimeout 一定時間の経過後に処理を行う