JavaScript异步编程

首发于我的博客 jolyon.cc

从Promise开始

Promise起源

推荐看这个日本人写的《JavaScript Promise迷你书》
以及这一篇讲解Promise的错误用法， promise-anti-patterns

Promise精选例题

//Q1: 两种写法有什么区别
let a =Promise.resolve('Jolyon')
let doSomethingElse =function (arg){ console.log(arg) }
a.then(function() { //写法一
  return doSomething()
}).then(doSomethingElse)
a.then(function() { //写法二
  doSomething()
}).then(doSomethingElse)
//A1： 第一种写法doSomethingElse的参数为doSomething的返回值，第二种写法doSomethingElse的参数为undefined

//Q2: 以下代码输出顺序？
let promise = new Promise(function (resolve){
    console.log('inner promise') // 1
    resolve('Jolyon')
});
promise.then(function(value){
    console.log(value) // 3
});
console.log('outer promise') // 2
//A2: 输出结果为"inner promise" ,"outer promise", "Jolyon"。Promise规范要求了以异步方式调用回调函数，因此所有的实现都遵循这一方针，相当于setTimeout(doSomething, 0)

//Q3: 下面代码错在哪里？
function badAsyncCall() {
    var promise = doSomethingAsync()
    promise.then(function() {
        somethingComplicated()
    })
    return promise
}
//A3: Promise.then会返回一个新的promise，在 promise.then 中产生的异常不会被外部捕获，此外，也不能得到 then 的返回值。正确写法：
function asyncCall() {
    var promise = Promise.resolve()
    return promise.then(function() {
        return newVar
    });
}

//Q4：下面代码错在哪里？
var loadSomething = Promise.resolve('loadSomething')
var loadAnotherthing =Promise.resolve('loadAnotherthing')
loadSomething().then(function(something) {
    loadAnotherthing().then(function(another) {
                    DoSomethingOnThem(something, another);
    });
});
//A4: 像极了回调地狱，把回调的思维用在了Promise上。他的目的是想等两个异步操作loadSomething，loadAnotherthing都完成以后，再进行DoSomethingOnThem，这种情况应该用Promise.All改写.
Promise.all([loadSomething(), loadAnotherThing()])
    .spread(function(something, another) {
        DoSomethingOnThem(something, another);
});
// 除此之外还有Promise.race，也是解决这一类问题的好帮手

Generator函数

Iterator接口协议

如果使用TypeScript的写法，遍历器接口（Iterable）、指针对象（Iterator）和next方法返回值的规格可以描述如下。只要满足这个接口协议的对象或者数据结构就可以通过遍历器来遍历，包括使用for-of, (...)。

interface Iterable {
  [Symbol.iterator]() : Iterator,
}

interface Iterator {
  next(value?: any) : IterationResult,
}

interface IterationResult {
  value: any,
  done: boolean,
}

在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。
可以通过扩展运算符(...)调用默认的iterator接口函数

// 例一
var str = 'hello'
var i = str[Symbol.iterator]()
i.next() // { value: 'h', done: false }
i.next() // { value: 'b', done: false }
[...str] //  ['h','e','l','l','o']

// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

Symbol.iterator方法的最简单实现，还是使用Generator函数。

var myIterable = {};

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

// 或者采用下面的简洁写法

let obj = {
  * [Symbol.iterator]() {
    yield 'hello';
    yield 'world';
  }
};

for (let x of obj) {
  console.log(x);
}
// hello
// world

Generator函数的写法

Generator函数就是实现iterator遍历器借口的简便函数，先看下一个完整的iterator接口实现是什么样的:

// 模拟
function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++]} :
        {done: true};
    }
  };
}

在看下使用generator函数是什么样的:

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
}
[...myIterable] // [1, 2, 3]
var i = myIterable[Symbol.iterator]();
i.next() // { value:1, done:false }
i.next() // { value:2, done:false }
i.next() // { value:2, done:false }

next方法的参数

如果next方法带一个参数，则这个参数回作为yield a的返回值继续传递。

function* f() {
  for(var i=0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}
var g = f();
g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }