JS异步处理

动机

由于JS单线程，导致很多麻烦（例如在Android中，一个线程网络操作，结束后通知主线程，JS就不行呀），所以异步在JS中就显得很重要了。关于异步是什么，这里就不说明了。

Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。（这好像Java里面的Future与Callable）

问题：在多个回调函数嵌套之后，就会出现代码横向发展（而不是纵向发展）难以管理。即回调函数噩梦（callback hell）.

例如读取A文件后，再去读取B文件：

fs.readFile(fileA, function (err, data) {
  fs.readFile(fileB, function (err, data) {
    // ...
  });
});

Promise的出现就是解决这个问题的，将回调函数的横向发展，变为纵向发展。其写法如下：

var readFile = require('fs-readfile-promise');

readFile(fileA)
.then(function(data){
  console.log(data.toString());
})
.then(function(){
  return readFile(fileB);
})
.then(function(data){
  console.log(data.toString());
})
.catch(function(err) {
  console.log(err);
});

Promise 提供 then 方法加载回调函数，catch方法捕捉执行过程中抛出的错误。
Promise的API如下：

var promise = new Promise(function(resolve, reject) {
  // 做一些异步操作的事情(一般是耗时操作)

  if (/* 一切正常 */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

resolve与reject是 2个函数，一个表示执行成功，一个表示失败。resolve是在then中执行的，而reject在catch中执行的。

那么在使用的时候:

promise.then(function(result) {
  console.log(result); // “完美！”
}, function(err) {
  console.log(err); // Error: "出问题了"
});

then接受两个参数，成功的时候调用一个，失败的时候调用另一个，两个都是可选的，所以你可以只处理成功的情况或者失败的情况。（在失败的时候也可以用catch方法来捕捉，即then表示正确的结果，catch是错误的结果）

Generator

执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。在Python中也有Generator，都是一个道理。

形式上，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

在Generator在第一次调用next的时候，就会执行第一个yield之后的一条语句，然后返回结果。然后第二次调用next的时候，就会执行第二个yield之后的一条语句。然后第三次调用next的时候，这时候没有yield的了。所以，这里会执行return。

在其中

• value表示yield出来的值或者return返回的值。
• done表示该异步过程是否结束（return之后就表示结束了）

由于Generator函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield语句就是暂停标志。

Async/Await

其实这是Generator的语法糖。
那么对于Async/Await是怎么写的呢？async表示这是一个async函数（其本身没有用，感觉只是语意），await只能用在这个函数里面。（await后面一定是一个Promise函数）

 var promise = new Promise(function (resolve, reject) {
        // 做一些异步操作的事情(一般是耗时操作)

        if (/* 一切正常 */) {
            resolve("Stuff worked!");
        }
        else {
            reject(Error("It broke"));
        }
    });

    var start = async function () {
        console.log('Start');
        await promise;
    };

那么await就是表示等待promise执行完毕。但是有一个问题，怎么得到promise的返回结果呢？

var promise = new Promise(function (resolve, reject) {
        // 做一些异步操作的事情(一般是耗时操作)

        if (/* 一切正常 */) {
            resolve("Stuff worked!");
        }
        else {
            reject(Error("It broke"));
        }
    });

    var start = async function () {
        try {
            console.log('start');
            let result = await promise;
        } catch (err) {
            console.log(err); // 这里捕捉到错误 `error`
        }
    };
    

这样可以看到，若是reject在Promise中被调用，那么在async函数里面，catch就会执行；若是resolve在Promise中被调用，那么得到了一个result，result就是一个Promise对象了，就可以then了。这样就可以了~

当然，这样循环也是可以的：await看起来就像是同步代码，所以可以理所当然的写在for循环里，不必担心以往需要闭包才能解决的问题。

var start = async function () {
    for (var i = 1; i <= 10; i++) {
        console.log(`当前是第${i}次等待..`);
        await sleep(1000);
    }
};

参考

体验异步的终极解决方案-ES7的Async/Await

联系我

QQ 1906362072
Mail hellowangqihang@gmail.com