async、awaitとは？
非同期処理を記述できる文法で、Promiseをより簡潔に記述する事が可能になります。Promiseに関しては下記の記事で解説しております。
async、awaitの使い方
resolveメソッドで値を返すPromiseオブジェクトをthenを使わずにそのままデバッグしようとしたら下記のように空のPromiseオブジェクトが入っているだけになります。もちろん、thenを使えばresolveの値を取り出す事が可能ですが、async、awaitを使っても取り出す事が可能です。
|
1 2 3 4 5 6 |
let promise = new Promise(resolve => { resolve("テスト"); }) let a = promise console.log(a); // Promise {} |
下記のように関数の前にasync、promiseオブジェクトの前にawaitをつける事でthenを使わなくてもresolveにより返された値を取得できるようになりました。
|
1 2 3 4 5 6 7 8 9 |
let promise = new Promise(resolve => { resolve("テスト"); }) async function kansu() { let a = await promise console.log(a); //テスト } kansu(); |
このようにasync、awaitが適用された関数のことを非同期関数と呼びます。
async function
- Promiseオブジェクトを返す関数（非同期関数）ということを指します。
- 非同期関数ないでreturnするとresolveした結果を返します。
await [Promiseオブジェクトを返す関数]
- 引数で指定した「Promiseオブジェクトを返す関数」がresolve、rejectするのを待ちます。
- Promiseオブジェクトが返って来るのを待っている間はこの文より下の処理は実行されません。
より簡潔に記述する。
下記のように静的なresolveメソッドを使った関数を定義してより簡潔に記述する事ができます。
|
1 2 3 4 5 6 7 8 9 10 |
let promise1 = Promise.resolve("テスト"); let promise2 = Promise.resolve("テスト2"); async function kansu() { let a = await promise1 let b = await promise2 console.log(a); //テスト console.log(b); //テスト2 } kansu(); |
エラー処理
rejectを使ったエラー処理は非同期関数内でtry 〜 catchで囲えば実現する事が可能になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let promise1 = Promise.resolve("テスト"); let promise2 = Promise.reject("エラー発生"); async function kansu() { try { let a = await promise1 let b = await promise2 console.log(a); console.log(b); } catch (error) { console.log(error); //エラー発生 } } kansu(); |
Promise.all
awaitを連続して記述するということもできますが、Promise.allを使う事でより簡潔に記述する事が可能になります。
|
1 2 3 4 5 6 7 8 9 |
let promise1 = Promise.resolve("テスト"); let promise2 = Promise.resolve("テスト2"); async function kansu() { let [a, b] = await Promise.all([promise1, promise2]) console.log(a); //テスト console.log(b); //テスト2 } kansu(); |
アロー関数を使って記述する。
非同期関数はアロー関数を使って下記のように記述することも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let promise = () => new Promise(resolve => { console.log("あ"); resolve(); }) let abc = async () => { await Promise.all([ promise(), promise() ]); }; abc(); |
非同期関数から非同期関数を呼ぶ
非同期関数から非同期関数を呼んだ場合でもちゃんと順番に処理が実行されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let promise1 = Promise.resolve("テスト"); let promise2 = Promise.resolve("テスト2"); async function kansu2() { let a = await promise1; let b = await promise2; console.log(a); console.log(b); } async function kansu() { console.log("あ"); await kansu2(); console.log("い"); } kansu(); |
実行結果
ちゃんとPromiseの結果を待って順番に処理されている事がわかります。
|
1 2 3 4 |
あ テスト テスト2 い |
この記事へのコメントはありません。