【JavaScript】async/await
async/awaitとは
Promiseより快適に非同期処理を利用することが出来る構文。
async
- 非同期関数を定義する
関数名の前にasync
を書くと、その関数はPromiseオブジェクトを返す。
async function test() { return 'test'; } test().then(value => { console.log(value); // => test });
await
- JavaScriptを待機させる
async
関数の中に記載すると、await
を指定した関数のPromiseオブジェクトが結果を返すまでJavaScriptを待機させる。
function test(value) { return new Promise(resolve => { setTimeout(() => { resolve(value * 2); }, 1000); }) } async function sample() { const result = await test(5); return result + 5; } sample().then(result => { console.log(result); // => 15 });
注意
async
関数でない場合にawait
は使えないため、必ずセットで利用する
Promiseとの比較
先ほどのawait
の例で書いた処理をPromiseで書いた場合、async/awaitの方がより簡潔に非同期処理を書くことが出来る。
function test(value) { return new Promise(resolve => { setTimeout(() => { resolve(value * 2); }, 1000); }) } function sample() { return test(5).then(result => { return result + 5; }); } sample().then(result => { console.log(result); // => 15 });