async怎样用

async函数返回一个Promise对象，可以使用then方法增加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

举一个栗子：

let timeout = ms => {    console.log('a')    return new Promise(resolve => {        console.log('b')        setTimeout(resolve, ms)    })}let asyncPrint = async (value, ms) => {    await timeout(ms)    console.log(value)    return `${value} world`}asyncPrint('hello', 500).then(_ => {    console.log(_)})//先依次输出 a b 而后500毫秒后输出hello 和 hello world

async 函数有多种形式

// 函数公告async function foo() {}// 函数表达式const foo = async function () {};// 对象的方法let obj = { async foo() {} };obj.foo().then(...)// Class 的方法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('jake').then(…);// 箭头函数const foo = async () => {};

注意??：

• async函数返回的是promise对象，所以可以用then接受函数内部return的数据
• await命令后面一般跟着Promise对象，会等着返回Promise的结果，而后执行后面的。假如不是Promise对象，比方是123,这时等于 return 123。
• await命令目前只允许存在与async函数里面

好了，假如你只是想理解async函数和await怎样用的，到这里即可以了。

=======================================
我是分割线

那么

async究竟是什么

一句话，它就是Generator函数的语法糖。

而Generator的实现不得不依赖于Iterator接口。

而Iterator的实现思想又来源于单向链表

所以我们先来说说单向链表

单向链表

wiki：链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序储存数据，而是在每一个节点里存到下一个节点的指针（Pointer）。因为不必需按顺序储存，链表在插入的时候可以达到 o(1)的复杂度，比另一种线性表顺序表快得多，但是查找一个节点或者者访问特定编号的节点则需要 o(n)的时间，而顺序表响应的时间复杂度分别是 o(logn)和 o(1)。

所以单向链表的优点就是：

• 无需预先分配内存
• 插入/删除节点不影响其余节点，效率高（典型的栗子：dom操作）

简单来说，单向链表是链表中最简单的一种，它包含两个域，一个信息域，一个指针域。这个链接指向列表中的下一个节点，而最后一个节点则指向null

image

单向链表的实现可以看这篇文章：
es6实现单向链表

Iterator(遍历器)

Iterator是一种接口，为各种不同的数据结构（原生支持Array Object Map Set）提供统一的访问机制。任何部署了Iterator接口的数据结构都可以完成遍历操作。

Iterator的作用：

• 为各种数据结构提供一个统一的、简便的访问接口
• 使数据结构的成员能够按某种次序排列
• 依靠Iterator，可以实现for…of循环

Iterator的遍历过程

• 创立一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
• 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
• 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
• 不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历能否结束。

根据以上的规则，我们来简单实现一个next方法

let makeIterator = array => {    let nextIndex = 0;    return {        next: _ => nextIndex < array.length ?        { value: array[nextIndex++], done: false }:        { value: undefined, done: true }    }//返回的是一个指针对象}let it = makeIterator(['a','b','c','d'])it.next()it.next()it.next()it.next()it.next()it.next()//next方法用来移动指针，第一次调用会指向a，并且返回一个对象，表示当前数据成员的信息，这个对象具备value和done两个属性，第二次调用指向b。。。

假如使用 TypeScript 的写法，遍历器接口（Iterable）、指针对象（Iterator）和next方法返回值的规格可以形容如下。

interface Iterable {  [Symbol.iterator]() : Iterator,}interface Iterator {  next(value?: any) : IterationResult,}interface IterationResult {  value: any,  done: boolean,}

接口部署

ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性上（symbol是什么），就是说，一个数据结构只需具备Symbol.iterator属性，即可以认为是可遍历的（Iterable）。

再举个栗子：

let arr = ['a','b','c']let iter = arr[Symbol.iterator]()iter.next() // { value: 'a', done: false }iter.next() // { value: 'b', done: false }iter.next() // { value: 'c', done: false }iter.next() // { value: undefined, done: true }

那么原生有哪些具有Iterator接口的数据结构呢

• Array
• Map
• Set
• String
• arguments对象
• NodeList 对象

调用Iterator接口的场合

• 解构赋值
• 扩张运算符
• Array.form()
• Map(), Set()（比方new Map([[‘a’,1],[‘b’,2]])）
• Promise.all()
• Promise.race()
• ==for…of==

const arr = ['red', 'green', 'blue'];for(let v of arr) {  console.log(v); // red green blue}const obj = {};obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);for(let v of obj) {  console.log(v); // red green blue} 

• ==Generator函数==

==========================================我是分割线

什么是Generator函数

形式上，Generator函数有两个特征。

• function关键字与函数名之间有一个*号
• 函数体内部使用yield表达式，定义不同的内部状态

function* myGenerator() {    yield 'hi'    yield 'lueluelue'    return 'byebye'}let myG = myGenerator()myG.next() //{value: "hi", done: false}myG.next() //{value: "lueluelue", done: false}myG.next() //{value: "byebye", done: true}myG.next() //{value: undefined, done: true}

通过上面的代码，可以得出，Generator函数是一个指针对象生成函数，返回的指针对象，可以依次遍历Generator函数内部的每一个状态。
与普通函数不同的是。调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

Generator函数与Iterator接口的关系

根据之前

任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个指针对象。

又由于Generator函数就是遍历器生成函数，因而可以把Generator函数赋值给对象的Symbol.iterator属性，从而使该对象具备Iterator接口。
比方：

let myIterable = {}myIterable[Symbol.iterator] = function* (){    yield 1    yield 2    yield 3}[...myIterable] // 1,2,3

那么aynsc和Generator又是什么关系呢？
答复这个问题之前，我们需要知道什么是异步。
=============================================我是分割线

异步

我们都知道，js是单线程的，浅显的讲就是代码一行行的执行呗。可是要是遇到了下面这种情况呢？

image

上图的绿色部分是程序的运行时间，红色部分是等待时间。可以看到，因为I/O操作很慢，所以这个线程的大部分运行时间都在空等I/O操作的返回结果。

那为什么不用多线程呢？

假如采用多线程，同时运行多个任务，那很可能就是下面这样。

image

可以看到，多线程不仅占用多倍的系统资源，也闲置多倍的资源，这显然不正当。

那么要怎样处理这个问题呢？这时候就用到了Event Loop。

Event Loop是一个程序结构，用于等待和发送消息和事件

简单说，就是在程序中设置两个线程：一个负责程序本身的运行，称为”主线程”；另一个负责主线程与其余进程（主要是各种I/O操作）的通信，被称为”Event Loop线程”（可以译为”消息线程”）。

image

上图主线程的绿色部分，还是表示运行时间，而橙色部分表示空闲时间。每当遇到I/O的时候，主线程就让Event Loop线程去通知相应的I/O程序，而后接着往后运行，所以不存在红色的等待时间。等到I/O程序完成操作，Event Loop线程再把结果返回主线程。主线程就调用事前设定的回调函数，完成整个任务。

这种运行方式称为”异步模式”

我们怎样实现异步呢？

比较传统的几种方法：

• 回调函数
• 事件监听
• 发布/订阅
• Promise 对象

比方回调函数（callback）

fs.readFile('/etc/passwd', 'utf-8', function (err, data) {  if (err) throw err;  console.log(data);});

上面代码中，readFile函数的第三个参数，就是回调函数，也就是任务的第二段。等到操作系统返回了/etc/passwd这个文件以后，回调函数才会执行。

但是回调函数很容易出现一个问题

fs.readFile(fileA, 'utf-8', function (err, data) {  //do something  fs.readFile(fileB, 'utf-8', function (err, data) {    //do something    fs.readFile(fileC, 'utf-8', function (err, data) {        // ...      });  });});

这种时候就出现了多重嵌套，因为多个文件形成了强耦合，只需有一个操作需要修改，它的上层回调函数和下层回调函数，可能都要跟着修改。这种情况就称为”回调函数地狱”

Promise就很好的处理了这个问题

var fs = require('fs');var readFile = function (fileName){  return new Promise(function (resolve, reject){    fs.readFile(fileName, function(error, data){      if (error) return reject(error);      resolve(data);    });  });};readFile(fileA).then(function (data) {  console.log(data.toString());}).then(function () {  return readFile(fileB);}).then(function (data) {  console.log(data.toString());}).then(function () {  return readFile(fileC);}).then(function (data) {  console.log(data.toString());}).catch(function (err) {  console.log(err);});

可以看到使用了Promise以后，异步任务看的比较的清楚了，但又有了一个问题，那就是代码显得很冗余，一眼看去是一堆的then，语义变得不清楚。

那么，有没有更好的写法呢？

答案是Generator函数

var fs = require('fs');var readFile = function (fileName){  return new Promise(function (resolve, reject){    fs.readFile(fileName, function(error, data){      if (error) return reject(error);      resolve(data);    });  });};var gen = function* (){  var f1 = yield readFile('/etc/fstab');  console.log(f1.toString());  var f2 = yield readFile('/etc/shells');  console.log(f2.toString());};

而后，我们可以手动执行

var g = gen();g.next().value.then(function(data){  g.next(data).value.then(function(data){    g.next(data);  });});

手动执行其实就是用then方法，层层增加回调函数。了解了这一点，即可以写出一个自动执行器。

function run(gen){  var g = gen();  function next(data){    var result = g.next(data);    if (result.done) return result.value;    result.value.then(function(data){      next(data);    });  }  next();}run(gen);

或者者用co模块

上面代码中，只需 Generator 函数还没执行到最后一步，next函数就调用自身，以此实现自动执行。

说了这么多，开始切入正题

那么究竟什么是 aynsc呢

// Generatorrun(function*() {  const res1 = yield readFile(path.resolve(__dirname, '../data/a.json'), { encoding: 'utf8' });  console.log(res1);  const res2 = yield readFile(path.resolve(__dirname, '../data/b.json'), { encoding: 'utf8' });  console.log(res2);});// async/awaitconst readFile = async ()=>{  const res1 = await readFile(path.resolve(__dirname, '../data/a.json'), { encoding: 'utf8' });  console.log(res1);  const res2 = await readFile(path.resolve(__dirname, '../data/b.json'), { encoding: 'utf8' });  console.log(res2);  return 'done'；}const res = readFile();

答案就是 async函数就是自带了执行器 的Generator函数的语法糖，我们只要要把’*’换成async，把yield换成await即可以了。