Async/await

介绍

async 函数时什么，其实就是 Generator 的语法糖，只需要将 * 改写成 async，yield 改写成 await。我们来看看 Generator 的写法，与 async 的写法。

const readFile = function (fileName, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(fileName);
      resolve(fileName); // 需要给 `Promise` 一个状态转化，就是异步执行是否成功
    }, ms);
  });
};

function* genator() {
  yield readFile('fileName1', 1000);
  yield readFile('fileName2', 2000);
  yield readFile('fileName3', 3000);
  console.log('打印完毕');
}
const gen = genator();
gen.next(); // fileName1
gen.next(); // fileName2
gen.next(); // fileName3

async function asyncTest() {
  await readFile('fileName1', 1000);
  await readFile('fileName2', 2000);
  await readFile('fileName3', 3000);
  console.log('执行完毕');
}
asyncTest();
// fileName1
// fileName2
// fileName3
// 执行完毕

从上面我们可以看出，我们需要手动调用 next 方法，来执行下一步。而 async 有自己内置执行器。

我们来看看 async 对 Generator 的改进。

内置执行器 Generator 函数执行需要 next 执行器，外面手动调用，所以有 co 模块，而 async 函数自带执行器，与普通函数一样，只需要一行调用。下面代码中，调用了该函数之后，就会自动执行，输出最后结果。

asyncTest();

语义更好 async/await，比起 Generator 函数的 * 与 yield，语义更清晰。 async 就表示异步，而 await 表示后面的表达式需要等待结果。
适用性更强 co 模块约定，yield 后面只能是 Thunk 函数或者 Promise 对象，而 await 后面可以是 Promise，也可以是原始类型值。
返回值是 Promise async 函数返回值是 Promise 对象，可以用 then 方法来进行下一步操作。 await 命令就是内部 then 命令的语法糖。

用法

返回 Promise 对象

async 函数返回一个 Promise 对象，可以使用 then 方法加入回调函数。
执行函数时，遇到 await 就会先返回，等异步操作结束，再继续执行函数体后面的语句。
必须等到内部所有 await 命令后面的 Promise 对象执行完毕，状态才会改变，除非遇到 return 或者报错。
async 函数内部的异步操作执行完毕，就可以执行 then 方法。
JS 没有休眠的语法，但是借助 await 命令就可以让程序停顿一定的时间。

async function useAsync() {
  // readFile 使用的是本文顶部的方法
  const result = await readFile('fileName', 1000);
  return result;
}
useAsync().then((value) => {
  console.log(value);
});
// fileName
// fileName

如果返回 reject 状态，则会中断执行，并通过 catch 捕获

async function useAsync() {
  // readFile 使用的是本文顶部的方法
  const result = await Promise.reject('测试错误');
  console.log('打印？');
  return result;
}
useAsync()
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });
// 测试错误

await 命令

await 命令后面是一个 Promise 对象，返回结果。如果不是 Promise，就直接返回对应值。

await 命令只能出现在 async 命令函数内部，不然会报错。

const add = (a, b) => {
  return a + b;
};
async function useAsync() {
  const result = await add(1, 2);
  return result;
}
useAsync().then((value) => {
  console.log(value);
});
// 3

await 后面跟着 add 方法，算出一个数值 3，然后将值 return 出来。

简单的 await 使用方法，就是如此。

hzzzzzzzq / Blog

ES 6 系列 - 11. 三种异步之Async函数 #12

Async/await

介绍

用法

返回 Promise 对象

await 命令