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

众所周知javascript是单线程的，它的设计之初是为浏览器设计的GUI编程语言，GUI编程的特性之一是保证UI线程必定不能阻塞，不然体验不佳，甚至界面卡死。

所谓"单线程"，就是指一次只能完成一件任务。若是有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

什么叫异步？

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

如下是当有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--|
复制代码

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

1. 回调函数
2. Promise
3. Generator
4. co
5. async,await

下面会一步一步展示各类方式。

回调函数

function f1(callback){

setTimeout(function () {

// f1的任务代码
    callback();

}, 1000);

}
复制代码

缺点 :

1. 不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱
2. 每一个任务只能指定一个回调函数。
3. 不能捕获异常 （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)

1. 生成器是一个函数，须要加* ，能够用来生成迭代器
2. 生成器函数和普通函数不同，普通函数是一旦调用必定会执行完，可是生成器函数中间能够暂停。
3. 生成器和普通函数不同，调用它并不会当即执行
4. 它会返回今生成器的迭代器,迭代器是一个对象，每调用一次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