ES6学习笔记之async函数

学习笔记
,

Learning Card

  • async函数是什么
    • generator函数的语法糖，即高级封装
  • 基本用法
    • 将generator函数的*替换成了async，yield替换成了await
    • 但是内置执行器，可以直接执行

async函数是什么

  • 一句话，async函数是generator函数的语法糖
  • 所谓语法糖，就是高级封装

我们可以理解，async函数就是generator函数的高级版，它让generator函数写起来更方便了。

async函数的基本用法

既然async函数是generator的高级封装，我们可以结合两者一起来看看它们之间的区别和联系。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const fs = require('fs');
const readFile = function(fileName) {
  return new Promise(function(resolve, reject) {
    fs.readFile(fileName, function(err, data) {
      if(error) return reject(error);
      resolve(data);
    })
  })
}

//generator函数写法
const gen = function* () {
  const f1 = yield readFile('/data1');
  const f2 = yield readFile('/data2');
  console.log(f1.toString());
  console.log(f2.toString());
};

//async函数写法
const asyncReadFile = async function() {
  const f1 = await readFile('/data1');
  const f2 = await readFile('/data2');
  console.log(f1.toString());
  console.log(f2.toString());
}

从写法上看，不难发现，async函数只是将generator函数的星号（*）替换成了async，将yield替换成了await。

但是async在用法上还是对generator函数有了一些改进：

  1. 内置执行器

    generator函数的执行需要next()来调用，但是async函数自带执行器，即与普通函数一样，直接调用即可

    1
    asyncReadFile()

  2. 语义更明确

    async本身就有异步的含义，await也有等待结果的意思，比*和yield意思更明确

  3. 返回值是Promise

    async函数的返回值是Promise对象，也就是说，我们可以用then方法执行下一步操作。