async / await の使い方

ES2017 で追加された async / await 構文の使い方を紹介します。

async / await 構文は Promise を用いた非同期処理の記述をよりシンプルにするために導入された JavaScriptの新構文です。

async / await は Promise の技術に強く依存しているため、Promiseの理解が不十分な方はまず、 Promiseに関する記事 を確認してください。

async function

通常 Promise の完了後の処理を記述する場合 then を用いて記述します。

function getUserInfo(authToken) {
  return sendUserAPI(authToken).then( (result)=>{
    return result.userInfo
  } )
}

getUserInfo(token).then( (userInfo)=>{
  console.log(userInfo) // {name: "Tom", age: 23, ...}
} );

async function の記法を用いる場合、上記のコードは以下の用に記述できます。

async function getUserInfo(authToken) {
  const result = await sendUserAPI(authToken)
  return result.userInfo
}

getUserInfo(token).then( (userInfo)=>{
  console.log(userInfo) // {name: "Tom", age: 23, ...}
} );

function キーワードの前に、async キーワードを添えることで、関数を async function として実装する事が出来ます。

async function には 以下のような特徴があります。

  • await キーワードを用いて Promise の 解決を待つことが出来る。
  • return した内容は自動的に Promise.resolve でラップされる。

async function 内では、 await を用いて Promise の解決を then を使わずに待つことが出来るようになります。 Promise の結果は、 戻り値で習得できるため、then を使う記述よりもより自然な形で同期的なコード記述が可能になります。

また return の内容は 常に Promise.resolve でラップされるため、 async function の戻り値は必ず Promise になります。

エラー処理

await キーワードを利用すると、Promiseの結果は戻り値として取得可能になります。一方で、Promiseが失敗した際のエラーは例外として throw されるため、 これを try … catch 構文で取得する事が出来ます。

async function getUserInfo(authToken) {
  try{
    const result = await sendUserAPI(authToken)
    return result.userInfo  
  }catch(e){
    if(e.message === "authError"){
      return null;
    }else{
      throw e
    }
  }
}

getUserInfo(token).then( (userInfo)=>{
  console.log(userInfo) // null or {name: "Tom", age: 23, ...}
} ).catch((e)=>{
  // some unexpected error
});

try … catch 内部でも return したり 例外を throw することが出来ます。

return した場合 async function は正常終了したものとみなされ、return した値が then クロージャに渡されます。

async function 利用側で、 catch クロージャを実行したい場合は、必ず例外を 再度 throw するように注意しましょう。

参考

async function – JavaScript | MDN

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です