ES8 async await 概括

async, await 主要用于异步代码回掉中的数据获取。

背景

一般而言,使用  node 进行数据库操作或者其他类似的异步 i/o 操作时,经常需要面对异步回掉数据的处理。最原始的方法自然是在回掉函数中嵌入处理逻辑,但是这种方法会导致代码可读性变差。

所以后来的 ES6 中加入了 Promise ,可用于处理异步回掉得到的数据,增强代码可读性。在 ES8 的 async 和 await 推出前,还有类似 waterfall 等 node 库,在处理异步代码 的同时,还能保持代码的可读性。

await 与 .then

await 与 Promise 的 .then 方法其实在某种程度上是等价的,使用 await 可以增强代码可读性,避免过度的回掉嵌套。

举例

JsFiddle Demo:
//jsfiddle.net/ZenZing/b4w0t5zr/60/embed/js,html,css,result/dark/


Source:

const asyncResolve = (info, time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(info), time)
  });
};

// async await
(async (window, document) => {
  document.querySelector('#await').innerHTML = 'calling ...';

  try {
    const result = await asyncResolve('async & await resolved', 2000);
    document.querySelector('#await').innerHTML = result;
  } catch (e) {
    window.console.error(e);
  }
})(window, document);

// normal
((window, document) => {
  document.querySelector('#normal').innerHTML = 'calling ... ';

  asyncResolve('normal Promise resolved', 2000).then((result) => {
    document.querySelector('#normal').innerHTML = result;
  }).catch(e => {
    window.console.error(e);
  });
})(window, document);

await 必须在 async 中执行,在 await 时,async 将等待其内部的 await 返回数据,所以在 await 返回数据前,await 后的局部代码会被阻塞,但是 async 外部代码不受影响。

参考:

  1. MDN – async function

作者: YanWen

Web 开发者

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s