什么叫异步？

所谓异步简单说就是一个任务分成两段，先执行一段，转而执行其他任务，等做好了准备转而执行第二段。

以下是当有ABC三个任务，同步或异步执行的流程图：

同步

> thread ->|----A-----||-----B-----------||-------C------|

异步

A-Start ---------------------------------------- A-End   
           | B-Start ----------------------------------------|--- B-End   
           |   |     C-Start -------------------- C-End      |     |   
           V   V       V                           V         V     V      
  thread-> |-A-|---B---|-C-|-A-|-C-|--A--|-B-|--C--|---A-----|--B--|

异步编程时就需要指定异步任务完成后需要执行的指令，异步的发展历程如下：

回调函数

Promise

Generator

co

async,await

下面会一步一步展现各种方式。

回调函数

　　function f1(callback){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　callback();

　　　　}, 1000);

　　}

缺点 :

不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱
每个任务只能指定一个回调函数。
不能捕获异常（try catch 同步执行，回调函数会加入队列，无法捕获错误）

Promise

Promise 不仅可以避免回调地狱，还可以统一捕获失败的原因，目前也应用广泛

  let promise = new Promise(function (resolve,reject) {
    resolve('wo')
});
promise.then(function (data) {
    return data +'shuai'
}).then(function (data) {
    console.log(data)
}).catch(function (err) {
    console.log(err)
});// woshuai

Generator(ECMAScript6)

生成器是一个函数，需要加* ，可以用来生成迭代器
生成器函数和普通函数不一样，普通函数是一旦调用一定会执行完，但是生成器函数中间可以暂停。
生成器和普通函数不一样，调用它并不会立即执行
它会返回此生成器的迭代器,迭代器是一个对象，每调用一次next就可以返回一个值对象

function *go(a){
  console.log(1);
  //此处的b用来供外界输入进来的
  //这一行实现输入和输出，本次的输出放在yield后面，下次的输入放在yield前面
  let b =  yield a;
  console.log(2);
  let c = yield b;
  console.log(3);
  return c;
}
let it = go("a值");
//next第一次执行不需要参数，传参数没有意义
let r1 = it.next();
//第一次调用next会返回一个对象，此对象有两个属性，一个是value就是yield后面那个值，一个是done表示是否迭代完成
console.log(r1);//{ value: 'a', done: false }
let r2 = it.next('B值');
console.log(r2);//{ value: 'B值', done: false }
let r3 = it.next('C值');
console.log(r3);//{ value: 'C值', done: true }

co

随着前端的迅速发展，大神们觉得要像同步代码一样写异步，co问世了，co是 TJ 大神结合了promise 和生成器的一个库，实际上还是帮助我们自动执行迭代器

let fs = require('fs');

function readFile(filename) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filename, 'utf8', function (err, data) {
      err ? reject(err) : resolve(data);
    });
  })
}
function *read() {
  console.log('开始');
  let a = yield readFile('1.txt');
  console.log(a);
  let b = yield readFile('2.txt');
  console.log(b);
  let c = yield readFile('3.txt');
  console.log(c);
  return c;
}
function co(gen) {
  let it = gen();//我们要让我们的生成器持续执行
  return new Promise(function (resolve, reject) {
    !function next(lastVal) {
        let {value,done} = it.next(lastVal);
        if(done){
          resolve(value);
        }else{
          value.then(next,reject);
        }
    }()
  });
}
co(read).then(function (data) {
  console.log(data);
});

async/await

async await是语法糖，内部是generator+promise实现
async函数就是将Generator函数的星号（*）替换成async，将yield替换成await

let Promise = require('bluebird');
let readFile = Promise.promisify(require('fs').readFile);
async function read() {
  //await后面必须跟一个promise,
  let a = await readFile('./1.txt','utf8');
  console.log(a);
  let b = await readFile('./2.txt','utf8');
  console.log(b);
  let c = await readFile('./3.txt','utf8');
  console.log(c);
  return 'ok';
}

setTimeout,process.nextTick,ajax,setImmediate都可以处理异步逻辑，下一篇文章EventLoop会进行详细的介绍。

下一篇 javascript 运行机制 EventLoop

异步编程的前世今生(异步流程历史)