异步发展简明指咯个北

目录 (づ￣ 3￣)づ=>

[TOC]

什么是异步

有些时候有些操作我们需要经过漫长的等待才能得到结果，有些man觉得这段等待的时间蛮浪费的，于是冒出了一个想法，有木有办法不让我们这么干等着，它操作它的，我们剩下的程序继续执行自己的，当它最终拿到结果了再通知我们。
嗯……异步解决的就是这么个东东。。。

ajax年代

在这个年代，我们使用最淳朴的方式：

 $.ajax({
     type: "GET",
     url: "地址！！",
     data: {param1:xxx, param2:xxx},
     dataType: "json",
     success: function(data){
        
      }
 });

只需要一个函数！！一个函数！！就能实现异步的所有操作~

传统异步的问题

无法使用try/catch
回调地狱
有些时候我们需要在拿到异步结果以后再根据这个结果再进行另外一次异步操作，这么一层套一层，写出来的代码是这样的:

 $.ajax({
     type: "GET",
     url: "地址！！",
     data: {param1:xxx, param2:xxx},
     dataType: "json",
     success: function(data){
        $.ajax({
            type: "GET",
            url: "地址！！",
            data: {param1:xxx, param2:xxx},
            dataType: "json",
            success: function(data){
                $.ajax({
                    type: "GET",
                    url: "地址！！",
                    data: {param1:xxx, param2:xxx},
                    dataType: "json",
                    success: function(data){

                    }
                });
            }
        });
      }
 });

嗯....这维护起来同志们肯定、铁定、一定呀！觉得相当不方便！
于是就开始折腾。。。想去改变这种传统异步方法的书写形式，想办法让代码更易读易维护

Promise年代

Promise 的原理与用法详见我的这篇白菜大文 Promise深度学习—我のPromise/A+实现

这个年代，我们在书写异步代码的形式上取得了一定程度的进步，我们写起代码来是像这个样子滴

$('div').find().css()...

嗯，开了个玩笑别介意。。。其实大体想法就是这样的，像jQ一样链式书写异步代码

read(url,encode){
    return new Promise((resolve,reject)=>{
        readFile(url,encode,(err,data)=>{
            if(err)?reject(err):resolve(data); 
        })
    })
}
read('1.txt','utf8').then(value=>{
    return readFile(value,'utf8'); //根据1.txt的内容来查找读取2.txt
}).then(value=>{
    return readFile(value,'utf8');  //根据2.txt的内容来查找读取3.txt
}).then((value)=>{
    console.log(value); //输出3.txt的内容
}).catch((err)=>{
    //deal with error
})
//下一次then接收的参数为上一次return的结果，如果这个return的结果为promise则为promise的结果

嗯。。。好想好上不少？看起来是清爽一点，但逻辑上有点绕有木有？？

Co年代

这个年代，人们发觉之前promise的方案虽然已经使异步编程看起来简洁了不少。。但是，还是不够！！大佬说，我们要像写同步代码一样写异步！于是乎TJ老哥推出了它的Co，Co能让Promise和生成器/迭代器结合起来使用从而让我们达到之前的愿景"像写同步代码一样写异步代码"!

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'); //执行这里时必然有一个le a的输入，就像是上一句代码立即得到了返回值一样
  console.log(b);
  let c = yield readFile('3.txt');
  console.log(c);
  return c;
}
//---
function co(gen){ //传入一个生成器
    let it = gen(); //生成一个迭代器
    return new Promise((resolve,reject)=>{
        !function next(lastVal){
            let{value,done} = it.next(lastVal);
            if(done) {
                resolve(value); //如果生成器函数执行完成就fulfilled返回promise的状态
            }else{ //如果还没有迭代完，在此次返回的promise中绑定回调，当状态改变时调用下一次迭代
                value.then(next,reject); //这里的next的lastVal参数即为第一次迭代出的promise的结果，也是a的值，然后依次类推...
            }
        }()
    })
}
//---
co(read).then(function(data){
    console.log(data); //data会生成器函数中c的值
})

思路分析:
yield readFile('1.txt')执行完毕，会等待下一次迭代和let a的输入，而等到什么时候呢？会等到readFile这个异步函数得到结果后才会继续走。这时let a对于yield readFile('2.txt')是有效的，就像同步代码中立即得到了返回值一样。

Async/Await

Async/Await 实际上是 promise+迭代器实现的语法糖，常和bluebird promise实现库结合起来使用，号称异步的终结解决方案。

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';
}

read().then(data => {
  console.log(data);
});
//-------------------
//co实现
 function read(){
     return co(function *(){
         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 'ok';
     });
 }

参考资料: