レッスンに戻る

async/awaitを使用して書き直す

Promiseチェーンの章から、このサンプルコードを.then/catchではなくasync/awaitを使用して書き直してください。

function loadJson(url) {
  return fetch(url)
    .then(response => {
      if (response.status == 200) {
        return response.json();
      } else {
        throw new Error(response.status);
      }
    });
}

loadJson('https://javascriptinfo.dokyumento.jp/no-such-user.json')
  .catch(alert); // Error: 404

備考はコードの下に記載されています。

async function loadJson(url) { // (1)
  let response = await fetch(url); // (2)

  if (response.status == 200) {
    let json = await response.json(); // (3)
    return json;
  }

  throw new Error(response.status);
}

loadJson('https://javascriptinfo.dokyumento.jp/no-such-user.json')
  .catch(alert); // Error: 404 (4)

備考

  1. loadJson関数はasyncになります。

  2. 内部のすべての.thenawaitに置き換えられます。

  3. 次のように待機する代わりに、return response.json()を使用できます。

    if (response.status == 200) {
      return response.json(); // (3)
    }

    そうすると、外部コードはそのPromiseが解決されるまでawaitする必要があります。このケースでは問題ありません。

  4. loadJsonからスローされるエラーは.catchによって処理されます。async関数内にいないため、そこでawait loadJson(…)を使用することはできません。