【JavaScript】async/await
非同期処理
JavaScriptでは非同期処理を行うような関数を実行するとPromiseオブジェクトが返ってくることパターンが多いです。
返ってきたPromiseオブジェクトに対してthen
メソッドを読んで非同期処理終了後の処理も記述できるので、呼び出す側がコールバックまみれになりにくく、良い感じです。
function caller(){ let promise = http(); // Promiseオブジェクトを返す関数 promise.then(response => console.log(response)); } caller(); console.log("caller() was called.");
この非同期処理はasync``await
でより簡単に記述することができます。
async/await
async
async
は非同期処理を完結に記述するための修飾子です。
async
を関数定義に修飾することで、非同期関数として定義することができます。
async function http(){ // ... }
関数にasync
を付加することで、呼び出し時にPromiseオブジェクトを返すようになります。
let promise = http(); console.log(promise); // Promise
返したPromiseオブジェクトは、async
を付加した関数が終了するタイミングでresolve
されます。
またasync
を付加した関数が例外を送出した場合はreject
されます。
await
await
はPromiseを返す式に修飾することで、Promiseに紐付いた非同期処理が終了するまでasync
関数内の処理が一時停止します。
async function http(){ await setTimeout(()=>("timeout."),3000); return "http response." }
一時停止したasync
関数の処理は、await
式の処理が終了して値が返されてから再開されます。
Usage
async function http(){ await setTimeout(()=>("timeout."),3000); return "http response." } function caller(){ let promise = http(); promise.then(response => console.log(response)); // 3秒後に出力 } console.log(caller()); console.log("caller() was called."); // 先に出力