回到课程
本资料仅提供以下语言版本:English。请 帮助我们 将其翻译为 简体中文 版本。

使用 async/await 重写

使用 async/await 来替换 .then/catch 重写 Promises 链 章节的一个示例:

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

loadJson('no-such-user.json') // (3)
  .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('no-such-user.json')
  .catch(alert); // Error: 404 (4)

注释:

  1. 函数 loadUrl 变成了 async

  2. 所有内部 .then 都用 await 进行替换。

  3. 我们可以 return response.json() 而不是等待,就像这样:

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

    那么外部代码必须 await 所有 promise 状态为 resolve。在我们的例子中这没关系。

  4. loadJson 抛出的错误由 .catch 处理。我们不能使用 await loadJson(…),因为我们不在 async 函数中。