[译] ​ES2017 最佳特性 -- 数组中的异步函数以及共享缓冲区

2020-11-04 10:11:34 浏览数 (1)

  • 原文地址:?Best Features of ES2017 — Async Functions and Arrays and Shared Buffers
  • 原文作者:?John Au-Yeung
  • 译文出自:?掘金翻译计划
  • 本文永久链接:?https://github.com/xitu/gold-miner/blob/master/article/2020/best-features-of-es2017-async-functions-and-arrays-and-shared-buffers.md
  • 译者:云前端
  • 校对者:?Chorer, ?dupanpan

照片由 ?Elaine Casap 拍摄并发表在 ?Unsplash 上

自 2015 年起,JavaScript 可谓突飞猛进。

现在使用它比过去要舒服多了。

在本文中,我们将着眼于 ES2017 的最佳特性。

异步函数(Async Functions)和 Array.prototype.forEach()

Array.prototype.forEach 并不适用 asyncawait 语法。

举例来说,如果有如下代码:

代码语言:javascript复制
async function downloadContent(urls) {
  urls.forEach(async url => {
    const content = await makeRequest(url);
    console.log(content);
  });
}

那么并不会得到包含若干 promise 的结果,因为 forEach 不会等待每个 promise 完成。

取而代之的是,可以用 for-of 循环来迭代每个异步函数以获取结果:

代码语言:javascript复制
async function downloadContent(urls) {
  for (const url of urls) {
    const content = await makeRequest(url);
    console.log(content);
  }
}

for-of 循环能感知 await 操作符,所以可以用它循序运行所有异步函数。

若要并行运行若干异步函数,可以使用 Promise.all

代码语言:javascript复制
async function downloadContent(urls) {
  await Promise.all(urls.map(
    async url => {
      const content = await makeRequest(url);
      console.log(content);
    }));
}

我们将多个 URL 映射为异步函数的集合,这样一来就能在 promise 数组上调用 Promise.all 了。

调用该方法后会返回一个 promise,其解决值(resolved value)是一个包含了每一个 promise 解决值的数组。

立即调用异步函数表达式

我们也可以创建立即运行的异步函数。

举例来说,相比于以下写法:

代码语言:javascript复制
async function foo() {
  console.log(await promiseFunc());
}
foo();

我们可以这么写:

代码语言:javascript复制
(async function () {
  console.log(await promiseFunc());
})();

也可以写成箭头函数:

代码语言:javascript复制
(async () => {
  console.log(await promiseFunc());
})();

未处理过的 rejection

在使用异步函数时,并不用担心未处理过的 rejection 。

这是因为当浏览器遇到它们时会自动报告。

举例来说,我们可以这样写:

代码语言:javascript复制
async function foo() {
  throw new Error('error');
}
foo();

而后我们将在控制台中看到被记录的报错信息。

Shared Array Buffers

ES2017 引入的共享数组缓冲区(shared array buffers)使得我们可以构建并发的应用了。

这让我们可以在多个 worker 和主线程之间共享 SharedArrayBuffer 对象的字节数据。

被共享的缓冲由一个类型化数组(typed array)包裹,这样就能访问到它们了。

我们可以快速在 worker 间共享数据,而跨 worker 的数据协同也变得简便了。

举例来说,可以编写如下代码来创建一个共享数组缓冲区:

代码语言:javascript复制
const worker = new Worker('worker.js');

const sharedBuffer = new SharedArrayBuffer(
  100 * Int32Array.BYTES_PER_ELEMENT);
  
worker.postMessage({
  sharedBuffer
});

const sharedArray = new Int32Array(sharedBuffer);

我们在 worker.js 中创建了一个 worker。

之后我们用 SharedArrayBuffer 创建了一个 shared buffer。

它包含 100 个元素。

接着,为了与其它 worker 共享缓冲区,我们调用了 postMessage 以发送缓冲数据。

要访问缓冲区中的数据,就得创建一个新的 Int32Array 实例。

接下来在 worker.js worker 中,这样编写以获得缓冲数据:

代码语言:javascript复制
self.addEventListener('message', (event) => {
  const {
    sharedBuffer
  } = event.data;
  const sharedArray = new Int32Array(sharedBuffer);
  //...
});

我们监听了 message 事件并从 event.data 中取得了 sharedBuffer 属性。

之后就能用与先前相同的方式访问它了。

总结

异步函数并不适配既有的数组实例方法。

同时,我们可以使用共享数组缓冲区在主线程和 worker 线程之间共享数据。

--End--

0 人点赞