异步函数：使 Promise 友好

借助异步函数，您可以编写基于 Promise 的代码，就像它是同步代码一样。

Jake Archibald
Jake Archibald
X 首页

异步函数在 Chrome、Edge、Firefox 和 Safari 中默认处于启用状态，而且效果非常出色。借助它们，您可以编写基于 Promise 的代码，就像它是同步代码一样，但不会阻塞主线程。它们可使异步代码更易于阅读，并减少“巧妙”的代码。

异步函数的运作方式如下：

async function myFirstAsyncFunction() {
  try {
    const fulfilledValue = await promise;
  } catch (rejectedValue) {
    // …
  }
}

如果您在函数定义之前使用 async 关键字，则可以在函数内使用 await。当您 await 一个 promise 时，该函数会以非阻塞方式暂停，直到 promise 得到解决。如果 promise 执行完毕，您将会收到相应值。如果 promise 被拒绝，则会抛出被拒绝的值。

浏览器支持

Browser Support

  • Chrome: 55.
  • Edge: 15.
  • Firefox: 52.
  • Safari: 10.1.

Source

示例：记录提取操作

假设您要提取网址并将响应记录为文本。使用 promise 时，代码如下所示：

function logFetch(url) {
  return fetch(url)
    .then((response) => response.text())
    .then((text) => {
      console.log(text);
    })
    .catch((err) => {
      console.error('fetch failed', err);
    });
}

下面是使用异步函数实现相同操作的代码：

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  } catch (err) {
    console.log('fetch failed', err);
  }
}

行数相同，但所有回调都消失了。这样一来，代码就更容易阅读了，对于不太熟悉 Promise 的用户来说更是如此。

异步返回值

无论您是否使用 await，异步函数都始终返回 Promise。该 Promise 会使用异步函数返回的任何内容进行解析，或使用异步函数抛出的任何内容进行拒绝。因此，使用以下命令：

// wait ms milliseconds
function wait(ms) {
  return new Promise((r) => setTimeout(r, ms));
}

async function hello() {
  await wait(500);
  return 'world';
}

…调用 hello() 会返回一个 promise，该 promise 会使用 "world" 执行。

async function foo() {
  await wait(500);
  throw Error('bar');
}

…调用 foo() 会返回一个 promise，该 promise 会使用 Error('bar') rejects。

示例：流式传输响应

在更复杂的示例中，异步函数的好处会更加明显。假设您希望在记录分块的同时流式传输响应，并返回最终大小。

下面是使用 promise 的版本：

function getResponseSize(url) {
  return fetch(url).then((response) => {
    const reader = response.body.getReader();
    let total = 0;

    return reader.read().then(function processResult(result) {
      if (result.done) return total;

      const value = result.value;
      total += value.length;
      console.log('Received chunk', value);

      return reader.read().then(processResult);
    });
  });
}

我是“承诺大使”Jake Archibald。您看到了吗？我如何在 processResult() 自身内调用 processResult() 来设置异步循环？写作让我感觉很聪明。但与大多数“智能”代码一样，您必须盯着它看很长时间才能弄清楚它在做什么，就像 90 年代的魔眼图案一样。

我们再使用异步函数试一试：

async function getResponseSize(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  let result = await reader.read();
  let total = 0;

  while (!result.done) {
    const value = result.value;
    total += value.length;
    console.log('Received chunk', value);
    // get the next result
    result = await reader.read();
  }

  return total;
}

所有“智能”功能都已消失。让我如此得意的异步循环被替换成了可靠但乏味的 while 循环。现在好多了。未来，您将获得异步迭代器，它会将 while 循环替换为 for-of 循环，使其更加简洁。

其他异步函数语法

我已经向您展示了 async function() {}，但 async 关键字可以与其他函数语法搭配使用：

箭头函数

// map some URLs to json-promises
const jsonPromises = urls.map(async (url) => {
  const response = await fetch(url);
  return response.json();
});

对象方法

const storage = {
  async getAvatar(name) {
    const cache = await caches.open('avatars');
    return cache.match(`/avatars/${name}.jpg`);
  }
};

storage.getAvatar('jaffathecake').then(…);

类方法

class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jaffathecake').then(…);

小心！避免过于顺序

虽然您编写的代码看起来是同步的，但请确保您不会错失并行执行操作的机会。

async function series() {
  await wait(500); // Wait 500ms…
  await wait(500); // …then wait another 500ms.
  return 'done!';
}

上述操作需要 1000 毫秒才能完成，而：

async function parallel() {
  const wait1 = wait(500); // Start a 500ms timer asynchronously…
  const wait2 = wait(500); // …meaning this timer happens in parallel.
  await Promise.all([wait1, wait2]); // Wait for both timers in parallel.
  return 'done!';
}

上述操作需要 500 毫秒才能完成，因为这两个等待操作会同时发生。我们来看一个实际示例。

示例：按顺序输出提取内容

假设您想提取一系列网址，并尽快按正确的顺序将其记录下来。

深呼吸 - 使用 Promise 时，情况如下所示：

function markHandled(promise) {
  promise.catch(() => {});
  return promise;
}

function logInOrder(urls) {
  // fetch all the URLs
  const textPromises = urls.map((url) => {
    return markHandled(fetch(url).then((response) => response.text()));
  });

  // log them in order
  return textPromises.reduce((chain, textPromise) => {
    return chain.then(() => textPromise).then((text) => console.log(text));
  }, Promise.resolve());
}

是的，没错，我使用 reduce 串联一系列 promise。我很聪明。不过，这种编码方式有些过于精巧，最好还是不要这样做。

但是，将上述代码转换为异步函数时，很容易陷入过于顺序的陷阱：

不推荐 - 过于顺序
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
 看起来整洁多了，但第二次提取操作只有在第一次提取操作完全读取完毕后才会开始，以此类推。这比并行执行提取操作的 Promise 示例要慢得多。幸运的是，我们可以找到理想的中间地带。
推荐 - 并行处理
function markHandled(...promises) {
  Promise.allSettled(promises);
}

async function logInOrder(urls) {
  // fetch all the URLs in parallel
  const textPromises = urls.map(async (url) => {
    const response = await fetch(url);
    return response.text();
  });

  markHandled(...textPromises);

  // log them in sequence
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}
 在此示例中，系统会并行提取和读取网址，但“智能”reduce 位已替换为标准的、乏味的、可读的 for 循环。

浏览器支持权宜解决方案：生成器

如果您定位的是支持生成器的浏览器（包括所有主流浏览器的最新版本），则可以对异步函数进行类似的 polyfill。

Babel 会为您完成此操作，以下是通过 Babel REPL 的示例

我建议使用转译方法，因为您只需在目标浏览器支持异步函数后关闭转译方法即可，但如果您真的不想使用转译器，可以使用 Babel 的 polyfill 自行使用。来替代：

async function slowEcho(val) {
  await wait(1000);
  return val;
}

…您需要添加polyfill 并编写以下代码：

const slowEcho = createAsyncFunction(function* (val) {
  yield wait(1000);
  return val;
});

请注意，您必须将生成器 (function*) 传递给 createAsyncFunction，并使用 yield 而非 await。除此之外，其运作方式与原来相同。

权宜解决方法：regenerator

如果您以旧版浏览器为目标平台，Babel 还可以转译生成器，让您能够在 IE8 等旧版浏览器中使用异步函数。为此，您需要 Babel 的 es2017 预设 和 es2015 预设。

输出不太美观，因此请注意代码膨胀。

将所有操作都异步执行！

在所有浏览器都支持异步函数后，请在每个返回 Promise 的函数中使用它们！这不仅可以让代码更整洁，还可以确保函数始终返回一个 Promise。

早在 2014 年，我就对异步函数非常感兴趣，很高兴看到它们真的在浏览器中推出了。好耶！