JavaScript 异步编程

1. JavaScript 天生异步

你说我一个浏览器写写表单验证的，怎么就突然成为如今最流行的编程语言了呢？

2. 异步函数的类型

1. I/O 函数

2. 计时函数

3. 异步解决方案

3.1 回调

const fs = require('fs');
fs.readFile('/etc/passwd', (err, result) => {
    console.log('finished');
})

step1(function(result1) {
step2(function(result2) {
        step3(function(result3) {
            // ...
        });
    });
});

1. 代码丑陋，不符合人类阅读习惯

2. 异常难以捕获
try/catch是同步代码，上面的 step 函数运行时，try/catch已经执行完毕，异常并不能被捕获。

3. 代码容易产生冗余
假设我们还有一个不同的操作需要在 step1 之后完成，那么得再来一段Callback Hell了……

3.2 Pub/Sub

button.addEventListener('click', () => {
   console.log('the button is clicked');
}, false);

3.3 Promise

// 假设`ready()`返回一个 Promise.
img.ready().then((result)=> { console.log('success!'); }, (err) => { console.log('failed!'); })

• Q

• when

• WinJS

• RSVP.js

**Promise **对象用于一个异步操作的最终完成（或失败）及其结果值的表示。(简单点说就是处理异步请求。我们经常会做些承诺，如果我赢了你就嫁给我，如果输了我就嫁给你之类的诺言。这就是promise的中文含义：诺言，一个成功，一个失败。)

原文：The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

aPromiseStuff().then((result) => {
    return doPromiseStuff();
}).then((result) => {
    return doAnotherPromiseStuff();
}).catch((err) => {
    console.log(err);
});

• We have a problem with promises

• JavaScript Promises: an Introduction

3.4 Generator

function* simpleGenerator(){
  yield "first";
  yield "second";
  yield "third";
  for (var i = 0; i < 3; i++)
    yield i;
}
var g = simpleGenerator();
console.log(g.next()); // { value: "first", done: false }
console.log(g.next()); // { value: "second", done: false }
console.log(g.next()); // { value: "third", done: false }
console.log(g.next()); // { value: 0, done: false },
console.log(g.next()); // { value: 1, done: false },
console.log(g.next()); // { value: 1, done: false },
console.log(g.next()); // { value: undefined, done: true },

function doSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
        }, 500);
    });
}

function* handleAsynchronousStuff() {
  try {
        const val = yield doSomething();
      console.log(val);
    } catch(e) {
        console.log(e);
    }
}

co:Generator based control flow goodness for nodejs and the browser, using promises, letting you write non-blocking code in a nice-ish way.

const co = require('co');

co(handleAsynchronousStuff) // 1

Generator 错误处理

function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1);

  // we wrap everything in a promise to avoid promise chaining,
  // which leads to memory leak errors.
  // see <https://github.com/tj/co/issues/180>
  return new Promise(function(resolve, reject) {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFulfilled();

    /**
     * @param {Mixed} res
     * @return {Promise}
     * @api private
     */

    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
      return null;
    }

    /**
     * @param {Error} err
     * @return {Promise}
     * @api private
     */

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * Get the next value in the generator,
     * return a promise.
     *
     * @param {Object} ret
     * @return {Promise}
     * @api private
     */

    function next(ret) {
      // generator function 执行完毕，Promise 状态变为 resolve
      if (ret.done) return resolve(ret.value);
      // value => Promise
      var value = toPromise.call(ctx, ret.value);
      // 如果 value 成功转变为 Promise，则通过`Promise.then()`继续拆解 generator function，并为Promise 添加`onFulfilled`和`onRejected`
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}

function doSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('something is wrong')
        }, 500);
    });
}

function* handleAsynchronousStuff() {
  try {
        const val = yield doSomething();
      console.log(val);
    } catch(e) {
        console.log('Error: ', e);
    }
}

co(handleAsynchronousStuff); // Error: something is wrong

async/await

async function handleAsynchronousStuff() {
    try {
        const val = await doSomething();
      console.log(val);
    } catch(e) {
        console.log('Error: ', e);
    }
}

handleAsynchronousStuff();

• 6 Reasons Why JavaScript’s Async/Await Blows Promises Away

小结

• Understand promises before you start using async/await

参考资料

• 《JavaScript 异步编程：设计快速响应的网络应用》

• 如何优雅地在 koa 中处理错误

• MDN

推荐阅读

• Understand promises before you start using async/await

• We have a problem with promises

• 6 Reasons Why JavaScript’s Async/Await Blows Promises Away

• JavaScript Promises: an Introduction