• 在 Generator 函数内部调用另一个 Generator 函数是没有效果的。

  function* foo() {
  
  }
  function* bar() {
    yield 'x';
    foo();
    yield 'y';
  }
  

• yield* 语句可以，可实现递归调用

  function* bar() {
    yield 'x';
    yield* foo();
    yield 'y';
  }
  

• Generator函数也有prototype属性，同样可以继承原型方法。

  function* g() {
  
  }
  g.prototype.hello = function () {
    return 'hi!';
  };
  let obj = g();
  obj instanceof g // true
  obj.hello() // hi!
  

• Generator函数总是返回一个遍历器对象，而不是this对象

  function* g() {
    this.a = 11;
  }
  let obj = g();
  obj.a // undefined
  

• Generator函数不能跟new命令一起用，会报错。

• 利用Generator函数和yield语句可以代替异步回调

  function* loadUI() {
    showLoadingScreen();
    yield loadUIDataAsynchronously();
    hideLoadingScreen();
  }
  var loader = loadUI();
  
  loader.next();  // 加载UI
  loader.next();  // 卸载UI
  

• 用Generator函数逐行读取文本文件

  function* numbers() {
    let file = new FileReader("numbers.txt");
    try {
      while(!file.eof) {
        yield parseInt(file.readLine(), 10);
      }
    } finally {
      file.close();
    }
  }
  

• 如果有一个多步操作非常耗时，采用回调函数，可能会写成下面这样

  step1(function (value1) {
    step2(value1, function(value2) {
      step3(value2, function(value3) {
        step4(value3, function(value4) {
          // Do something with value4
        });
      });
    });
  });
  

• Generator函数可以进一步改善代码运行流程

  function* longRunningTask(value1) {
    try {
      var value2 = yield step1(value1);
      var value3 = yield step2(value2);
      var value4 = yield step3(value3);
      var value5 = yield step4(value4);
      // Do something with value4
    } catch (e) {
      // Handle any error from step1 through step4
    }
  }
  

• 异步加载图片

  function loadImageAsync(url) {
    return new Promise(function(resolve, reject) {
      var image = new Image();
      // 加载成功
      image.onload = function() {
        resolve(image);
      };
      // 加载失败
      image.onerror = function() {
        reject(new Error('Could not load image at ' + url));
      };
  
      image.src = url;
    });
  }
  

• Promise.resolve等价于下面的写法

  Promise.resolve('foo')
  // 等价于
  new Promise(resolve => resolve('foo'))
  

• 将现有对象转为Promise对象

  // 将jQuery生成的deferred对象，转为一个新的Promise对象
  var jsPromise = Promise.resolve($.ajax('/whatever.json'));
  

• 参数是一个Promise实例，直接返回该实例
• 参数是一个thenable对象，thenable对象指的是具有then方法的对象

  let thenable = {
    then: function(resolve, reject) {
      resolve(42);
    }
  };
  let p1 = Promise.resolve(thenable);
  p1.then(function(value) {
    console.log(value);  // 42
  });
  

• 参数不是具有then方法的对象，返回一个新的Promise对象，状态为Resolved

  var p = Promise.resolve('Hello');
  p.then(function (s){
    console.log(s)
  });
  // Hello
  

• 不带有任何参数, 直接返回一个Resolved状态的Promise对象

  var p = Promise.resolve();
  p.then(function () {
    // ...
  });
  

• Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected

  var p = Promise.reject('出错了');
  // 等同于
  var p = new Promise((resolve, reject) => reject('出错了'))
  
  p.then(null, function (s) {
    console.log(s)
  });
  

• 如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数

  var promise = new Promise(
    function(resolve, reject) {
      throw new Error('test');
      // 或者 reject(new Error('test'));
  });
  promise.catch(function(error) {
    console.log(error);
  });
  // Error: test
  

• 建议总是使用catch方法，而不使用then方法的第二个参数reject来处理异常错误

• Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例

  // p1、p2、p3都是 Promise 实例
  var p = Promise.all([p1, p2, p3]);
  

• p的状态由p1、p2、p3决定，分成两种情况

  1. 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled
  2. 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected
  

• 例子

  // 生成一个Promise对象的数组
  var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
    return getJSON('/post/' + id + ".json");
  });
  
  Promise.all(promises).then(function (posts) {
    // ...
  }).catch(function(reason){
    // ...
  });
  

• Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例

  // p1、p2、p3都是 Promise 实例
  var p = Promise.all([p1, p2, p3]);
  

• 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数

• 异步请求，使用promise可以使执行流程清晰明了
• 需要管道，管道指当前任务的输出可以作为下一个任务的输入，形成一条数据管道，then方法

• Async函数版本

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

• 内置执行器，Generator 函数需要借助co等库才能做到
• 更好的语义，async和await，比起星号和yield，语义更清楚
• 更广的适用性，async函数的await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）
• 返回值是 Promise，比 Generator 函数的返回值是 Iterator 对象方便多了

// 函数声明
async function foo() {}

// 函数表达式
const foo = async function () {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  async getAvatar(name) {
    const cache = await cachePromise(name);
    return cache;
  }
}
const storage = new Storage();
storage.getAvatar('jake').then(…);

// 箭头函数
const foo = async () => {};

• async函数返回一个 Promise 对象，async函数内部return语句返回的值，会成为then方法回调函数的参数

  async function f() {
    return 'hello world';
  }
  
  f().then(v => console.log(v))
  // "hello world"
  

• async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态

  async function f() {
    throw new Error('出错了');
  }
  
  f().then(
    v => console.log(v),
    e => console.log(e)
  )
  

• 只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数

  async function getTitle(url) {
    let response = await fetch(url);  // 抓取网页
    let html = await response.text(); // 取出文本
    return html.match(/<title>([\s\S]+)<\/title>/i)[1];
  }
  getTitle('https://tc39.github.io/ecma262/').then(console.log)
  // "ECMAScript 2017 Language Specification"
  

• await命令后面是一个 Promise 对象，如果不是，会被转成一个立即resolve的 Promise 对象

  async function f() {
    return await 123;
  }
  
  f().then(v => console.log(v))
  // 123
  

• 只要一个await语句后面的 Promise 变为reject，那么整个async函数都会中断执行。

  async function f() {
    await Promise.reject('出错了');
    await Promise.resolve('hello world'); // 不会执行
  }
  

• 上面问题可以用try...catch来解决

  async function f() {
    try {
      await Promise.reject('出错了');
    } catch(e) {
    }
    return await Promise.resolve('hello world'); // 会执行
  }
  f().then(v => console.log(v))
  // hello world
  

• 最佳实践：尽量将await异步操作放在try...catch代码块之中，并在catch里处理异常

• async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

  async function fn(args) {
    // ...
  }
  
  // 等同于
  function fn(args) {
    return spawn(function* () {  // spawn函数就是自动执行器
      // ...
    });
  }
  

• spawn函数，自动执行器代码

  function spawn(genF) {
    return new Promise(function(resolve, reject) {
      var gen = genF();
      function step(nextF) {
        try {
          var next = nextF();
        } catch(e) {
          return reject(e);
        }
        if(next.done) {
          return resolve(next.value);
        }
        Promise.resolve(next.value).then(function(v) {
          step(function() { return gen.next(v); }); // 递归自动执行next
        }, function(e) {
          step(function() { return gen.throw(e); });
        });
      }
      step(function() { return gen.next(undefined); });
    });
  }