js处理异步函数：从callback到promise

摘要：在处理异步回调函数的情况有着越来越值得推崇的方法及类库，下面会依次介绍处理异步函数的发展史，及源码解读。而对象的状态，是由第一个的参数成功回调函数或失败回调函数的返回值决定的。

函数的执行分为同步和异步两种。
同步即为 同步连续执行，通俗点讲就是做完一件事，再去做另一件事。
异步即为 先做一件事，中间可以去做其他事情，稍后再回来做第一件事情。
同时还要记住两个特性：1.异步函数是没有返回值的，return不管用哦 2.try{}catch(e){}不能捕获异步函数中的异常。

js在处理异步回调函数的情况有着越来越值得推崇的方法及类库，下面会依次介绍js处理异步函数的发展史，及源码解读。
（本文代码是运行在node环境中）

let fs = require("fs");
fs.readFile("./1.txt","utf8",function(err,data){
    console.log(data);
})

如果只有一个异步请求，那用callback还好，但是相信大多数前端开发者都遇到过这两种情况：
a.一个异步请求获取到的结果是下一个异步请求的参数。(一直嵌套callback，代码不好管理会形成回调地狱);

let fs = require("fs");
    fs.readFile("./1.txt","utf8",(err,data)=>{
        fs.readFile(data,"utf8",(err,data)=>{
            console.log(data);
        })
    })

b.发出两个请求，只有当两个请求都成功获取到数据，在执行下一步操作。

let fs =require("fs");
    fs.readFile("./1.txt","utf8",(err,data)=>{
        console.log(data);
    })
    fs.readFile("./2.txt","utf8",(err,data)=>{
        console.log(data);
    })

像类似这种情况，只有当读取到1.txt 和2.txt的文件的时候，我们同时获取到两个异步请求的结果。我们可以写一个计数器的函数，统一处理回调;

function after(time,callback){
    let arr = [];
    return function(data){
        arr.push(data)
        if(--time==0){
            callback(arr);
        }
    }
}
  //统一处理回调结果的回调传到after函数中。
  let out = after(2,(res)=>{console.log(res)});
  let fs =require("fs");
    fs.readFile("./1.txt","utf8",(err,data)=>{
        out(data);
    })
    fs.readFile("./2.txt","utf8",(err,data)=>{
        out(data);
    })

tips：

方便我们更好的了解计数器的实现原理，我们需要了解一个概念：高阶函数
高阶函数：可以把函数作为参数 或者 return返回出一个函数。
举个例子：

①.判断一个变量是不是属于一个类型：

function isType(type,content){
   return Object.protoType.toString.call(content) ==`[Object ${type}]`
}
let a = [1,2,3];
isType("Array", a) == true;

②.js数据类型有好多，我们每次调用都要传入他的类型，麻不麻烦。所以我们写一个方法，可以批量生成函数。

function isType(type){
    return function(content){
        return Object.protoType.toString.call(content) == `[Oject ${type}]`
    }
}
let isArray = isType("Array");
let a = [1,2,3]
isArray(a);

前两种示例讲的是return返回一个函数，下面示例是一个预置函数及返回函数参数的结合示例（预置函数）。

③.场景加入我有一个函数，执行第三次的时候我想输出"我很可爱";平常我们可以这样去实现：

let time =0;
     function say(){
         if(++item==3){
         console.log("我很可爱")
         }
     }
     say();
     say();
     say();

高阶函数实现的话：

 function after(time,callback){
        return function(){
            if(--time ==0){
                   callback();
            }
        }
     }
     function say(){
         console.log("我很可爱");
     }
     let out =after(3,say)
     out();
     out();
     out();

高阶函数实现了将计时任务与业务逻辑拆分，高阶函数的实现主要得益于作用域的查找。

在看完了上面的callback讲述，主要其实还是讲述了callback的弊端:
a.回调地狱(callback无法解决)
b.并发请求，同时拿到结果(可通过计数器方式，但是太费劲，不太乐观)
这个时候duang~duang~duang~，ES6带着Promise来了~
Promise主要是es6提供的主要用于处理异步请求的一个对象，他能够很好的解决回调地狱以及并发请求。
在写promise源码之前，我们先通过几个调用promise的示例，了解一下promise的一些原理及特性,这在我们封装promise的时候能够起到很大的作用：
普通调用实例：

let fs = require("fs");
let p = new Promise(function(resolve,reject){
  fs.readFile("./1.txt","utf8",(err,data)=>{
      err?reject(err):resolve(data);
  })
})

p.then((data)=>{console.log(data)},(err)=>{console.log(err)});

1.promise实例可以多次调用then方法;

  p.then((data)=>{console.log(data)},(err)=>{console.log(err)});
  p.then((data)=>{console.log(data)},(err)=>{console.log(err)});

2.promise实例可以支持then方法的链式调用，jquery实现链式是通过返回当前的this。但是promise不可以通过返回this来实现。因为后续通过链式增加的then不是通过原始的promise对象的状态来决定走成功还是走失败的。

p.then((data)=>{console.log(data)},(err)=>{console.log(err)}).then((data)=>{console.log(data)})

3.只要then方法中的成功回调和失败回调，有返回值(包括undefiend)，都会走到下个then方法中的成功回调中，并且把返回值作为下个then成功回调的参数传进去。

第一个then走成功：
p.then((data)=>{return undefined},(err)={console.log()}).then((data)=>{console.log(data)})
输出：undefiend
第一个then走失败：
  p.then((data)=>{console.log(1)},(err)={return undefined).then((data)=>{console.log(data)})
输出：undefiend

4.只要then方法中的成功回调和失败回调，有一个抛出异常，则都会走到下一个then中的失败回调中;

第一个then走成功：
p.then((data)=>{throw new Err("错误")},(err)={console.log(1)}).then((data)=>{console.log("成功")},(err)=>{console.log(err)})
输出：错误
第一个then走失败：
  p.then((data)=>{console.log(1)},(err)={throw new Err("错误")).then((data)=>{console.log("成功")},(err)=>{console.log(err)})
输出：错误

5.成功和失败 只能走一个，如果成功了，就不会走失败，如果失败了，就不会走成功;

6.如果then方法中，返回的不是一个普通值，仍旧是一个promise对象，该如何处理？
答案：它会等待这个promise的执行结果，并且传给下一个then方法。如果成功，就把这个promise的结果传给下一个then的成功回调并且执行，如果失败就把错误传给下一个then的失败回调并且执行。

7.具备catch捕获错误;如果catche前面的所有then方法都没有失败回调，则catche会捕获到错误信息执行他就是用来兜儿底用的。

p是一个失败的回调:
p.then((data)=>{console.log("成功")}).then((data)=>{成功}).catche(e){console.log("错误")}

8.返回的结果和 promise是同一个，永远不会成功和失败

var  r  = new Promise(function(resolve,reject){
   return r;
})
r.then(function(){
    console.log(1)
},function(err){
    console.log(err)
})

以上是经过调用es6提供的promise，发现的一些特性，下面我们会根据这些特性去封装Promise类。

一.我们先通过初步了解的promise和简单的基本调用，简单的实现一个promise；

1.Promise支持传入一个参数，函数类型，这个函数往往是我们自己发起异步请求的函数，我们称它为执行器actuator,这个函数会在调用new Promise()的作用域内立即执行，并且传入两个函数一个resolve另一个是reject作为参数;

2.promise对象支持.then()的方法，then方法支持两个参数一个为onFulfilled成功回调另一个为onRejected失败回调;onFulfilled接受参数data为异步请求拿到的数据，onRejected接受的参数为捕获到的异常错误。

3.当异步回调成功时，执行resolve，并且把回调结果传给resolve函数。失败则执行reject，把异常信息传给reject函数。(这一步往往是在actuator执行器函数中我们自己去控制执行的)

4.一个promise对象，执行了resolve，就不会在去执行reject。执行了reject，也不会在去执行resolve；
所以promise内部中有一个类似状态机的机制，它分为三种状态，创建一个promise对象，默认状态为"pending"状态，当执行了resolve，则该状态变为"fulfilled"，若果执行了reject则该状态变为"rejected",所以我们在then方法中需要根据状态作出判断;

5.promise对象已经是成功状态或是失败状态时，都可以继续通过then传入函数，会通过当前的状态，来决定执行成功还失败，并且把结果或是错误传给相应的函数。所以我们需要拿到的结果和捕获的错误。

    function Promise(fn){
    this.status = "pending";//状态机
    //一个promise支持执行多个then，所以需要一个池子把他的回调函数存储起来，统一遍历执行；
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks =[]; 
    //保存结果或者错误异常
    this.result = "";//当前promise回调成功获取到的数据;
    this.reason = "";//当前promise失败的原因
    var self = this;
    function resolve(data){
        //执行了reject就不能执行resolve，所以必须保证是pending状态；
        //当执行回调成功，在执行器调用resolve，我们去遍历成功回调的池子，依次执行;
        //保存结果，并且将当前状态设置为"fulfilled"
        if(self.status=="pending"){
            self.result = data;
            self.status = "fulfilled";
            self.onFulfilledCallbacks.forEach((fn)=>{
                fn(data);
            })
        }
          
    }
    function reject(err){
        //执行了resolve就不能执行reject，所以必须保证是pending状态；
        //当执行回调失败，在执行器调用reject，我们去遍历成功回调的池子，依次执行;
        //保存错误原因并且将当前状态设置为"rejected"
        if(self.status=="pending"){
          self.reason= err;
          self.status ="rejected";
          self.onRejectedCallbacks.forEach((fn)=>{
              fn(err);
          })
        }
    }
    fn(resolve,reject)
}
Promise.prototype.then= function(onFulfilled,onRejected){
   //如果当前promise对象成功状态，则直接执行onFulfilled回调函数，并且把拿到的已经保存的成功数据传进去。
   if(this.status =="fulfilled"){
       onFulfilled(this.result)    
   }
   //如果当前promise对象失败状态，则直接执行rejected回调函数，并且把已经保存的补货失败的原因传进去。
   if(this.status =="rejected"){
       onRejected(this.reason);
   }
   if(this.status == "pending"){
       this.onFulfilledCallbacks.push(onFulfilled);
       this.onRejectedCallbacks.push(onRejected);
   }
}

到目前为止我们已经封装了一个简易版的promise了，我们可以通过一些case去测试一下，是否满足上面所描述的特性。

let fs = require("fs");
let p = new Promise((resolve,reject)=>{
   fs.readFile("./1.txt","utf8",function (err,data) {
              err ? reject(err):resolve(data);
   })
});
p.then(data=>{console.log(data)},err=>{console.log(err)}); 
p.then(data=>{console.log(data)},err=>{console.log(err)});

二、我们简易版的promise类，已经初步实现了一些promise的基本特性;这一节我们我们简易版的promise进行改版，把promise的更复杂的功能增加进去。

1.当我们调用promise时，传入的执行器会立刻执行，执行器函数内部是一个同步的过程，我们可以用try...catch捕获错误，并且应该直接调用失败的函数。

2.promise支持链式写法，then后面继续.then ,原理并不是像jquery一样返回一个this;而是不管当前promise状态是什么，都返回一个新的promise对象，官方文档命名这个新的promise对象为promise2。
3.链式写法中第二个then中的回调走成功还是走失败，取决于上一个then中返回的promise（就是promise2）对象的状态。 而 promise2对象的状态，是由第一个then的参数（成功回调函数或失败回调函数）的返回值决定的。如果返回的是一个值（包括返回的是undefined、""），则第二个then走成功;如果返回的仍旧是一个promise对象，那么promise2会等待返回的这个promise对象的回调结果而确定promise2的状态值，如果回调结果拿到的是一个值（成功），那么promise2会将此值作为参数传入字节的reosolve中并执行,如果回调中抛出异常（失败），那么promise2会把异常传到reject中并且执行；

function Promise(fn){
    this.status = "pending";
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks =[]; 
    this.result = "";
    this.reason = "";
    var self = this;
    function resolve(data){
        if(self.status=="pending"){
            self.result = data;
            self.status = "fulfilled";
            self.onFulfilledCallbacks.forEach((fn)=>{
                fn(data);
            })
        }
          
    }
    function reject(err){           
        if(self.status=="pending"){
          self.reason= err;
          self.status ="rejected";
          self.onRejectedCallbacks.forEach((fn)=>{
              fn(err);
          })
        }
    }
    try{
        fn(resolve,reject)
    }catch(e){
        reject(e)
    }
    
}
Promise.prototype.then= function(onFulfilled,onRejected){
   //then方法什么都不传，也可以支持连续调用  
   onFulfilled = onFulfilled ?onFulfilled :function(data){ return data};
   onRejected =onFulfilled ? onFulfilled :function(err){throw new Error(err)}
   let self = this;
   let Promise2;//声明primise2
   if(this.status =="fulfilled"){
       Promise2 = new Promise(function(resolve,reject){
           //promise2的状态，决定下一个then方法中执行成功还是失败。
           //promise2的状态,是由第一个then的onFulfilled的返回值决定的。
           //当我们执行onFulfilled(我们通过then方法传进来的自己的函数)的时候，是同步操作，需要通过trycatch捕获异常，如果发现异常就直接走下一个then的reject失败回调。
           //promise官方文档规定，每一个resolve或是reject回调的执行必须保证是在异步中执行，所以我们强制加定时器，保证onFulfilled是异步执行的。
           setTimeOut(function(){
               try{
                   let x = onFulfilled(self.result);
                   //获取到返回值，需要去解析，从而判断出promise2应该走失败还是成功。    
                   resolvePromise(Promise2,x,resolve,reject)                                              
               }catch(e){
                  //执行reject,下一个then就会走失败
                   reject(e);
               }
           })                                                      
       })          
   }
   if(this.status =="rejected"){
     Promise2 = new Promise(function(resolve,reject){
       setTimeout(function(){
           try{
               let x = onRejected(self.reason);
               resolvePromise(Promise2,x,resolve,reject)
           }catch(e){
               reject(e)
           }
       })
     })
       
   }
   if(this.status == "pending"){
   Promise2 = new Promise(function(resolve,reject){
        self.onFulfilledCallbacks.push(function(){
            setTimeout(function(){
                try{
                    let x =  onFulfilled(self.result);
                    resolvePromise(Promise2,x,resolve,reject);
                }catch (e){
                    reject(e)
                }
            })

        });
        self.onRejectedCallbacks.push(function(){
            setTimeout(function(){
                try {
                    let x =  onRejected(self.reason);
                    resolvePromise(Promise2,x,resolve,reject)
                }catch (e){
                    reject(e);
                }
            })

        });
    })
   }
   return Promise2;
}

function resolvePromise(promise2,x,resolve,reject){
    //此处如果相等会爆出类型错误；
    if(promise2 == x){
        reject(new TypeError("循环引用了"))
    }
    //如果x是对象或函数(引用类型的值),则需要进一步判断。（这块儿要想的多一些，因为x是开发人员写的函数返回的，第一个then中回调返回的）
    //若果x是一个普通值，则直接执行resolve，并且传给下个then的成功; 
    //如果返回的是一个promise对象，则promise2则会等待返回的promise对象执行完成，如果执行完成后，看这个promise走的成功还是失败，如果失败则抛出异常。如果成功则将获取的数据作为onFulfilled返回的结果，用于判断promise2走成功或者失败，因为返回的结果可能还是promise对象，所以用递归去执行，知道拿到数据或者异常。（递归）
    //判断是不是promise对象，通过有没有then方法
    //捕获异常是因为判断不严谨，存在then方法，可能也不是promise对象，调用它的then可能会报错。      
    let called =false;
    if(x!==null &&(typeof x =="object"|| typeof x =="function")){        
           try{
               let then =x.then;
               if(typeof then =="function"){
                   //promise对象
                   then.call(x,function(y){
                       if(called)return;
                       called = true;
                       resolvePromise(promise2,y,resolve,reject)
                   },function(err){
                       if(called)return;
                       called = true;
                       reject(err)
                   })
               
               }else{
                   //普通对象
                   resolve(x)
               }
           }catch(e){
              if(called)return;
              called = true;
              reject(e)
           }
    }else{
        resolve(x);
    }    
}

 到此，Promise的大部分特性都已经具备了。但是Promise对象还有一些其他的方法，可供调用，比如说catch方法，还有他的私有属性all 、race、defferd，如果前面的Promise封装懂了，那这些方法就so easy了，下面会根据这些方法的功能一一进行封装,
 

1.all方法处理 并发请求，同时获得结果。一个失败，则失败，都成功，才算成功.这个时候我们就想到前面我们写的计数器的用法。

 Promise.all([read("./1.txt"),read("./2.txt")]).then(res=>{console.log(res)})
 
 Promise.all = function(promiseArray){               
       return new Promise(function(resolve,reject){
           var result = [];
           var i=0;
           function processData(index,res){
               result[index] = res;
               if(++i==promiseArray.length){
                   resolve(result)
               } 
           }
           promiseArray.forEach((item,index)=>{
               item.then(res=>{processData(index,res)},reject)
           })
       })        
 };

2.race方法，Pomise.race，顾名思义“赛拍”，传入多个异步promise，只要有一个成功，则就成功，有一个失败则失败，后面也可跟then方法。

Promise.race = function(promiseArray){
    return new Promise(function(resolve,reject){
        promiseArray.forEach((item,index)=>{
            item.then(resolve,reject);
        })
    })
}
Promise.race([read("./1.txt"),read("./5.txt")]).then(res=>{console.log(res)},err=>{console.log(err)})

3.生成一个成功的promise，把传入的参数，传入到then的成功回调中,该方法返回一个promise

Promise.resolve=function(value){
    return new Promise(function(resolve,reject){
        //promise规范 resolve和reject函数必须是在异步回调中执行
        setTimeout(function(){
            resolve(value);
        })
    })
}
Promise.resolve("123").then(res=>{console.log(res)})

4.生成一个失败的promise，把传入的参数，传入到then的失败回调中。该方法返回一个promise

Promise.reject = function(err){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            reject(err);
        })

    })
}
Promise.reject("error").then(res=>{console.log(res)},err=>{console.log(err)})

5.catch托底捕获错误，这个方法是实例的共有方法，应该放到Promise的原型上，每一个 promise实例都可以调用.它支持一个参数，该参数是之前所有的then中，并没有失败回调，当发 生错误时，最后统一在catch中进行捕获

Promise.prototype.catch = function(calllback){
return this.then(null,callback)
}

6.很多人都用过jquery的deferrd对象，他和promise的deffer对象很类似。promise的deferred对象只是对promise进行了一次封装

Promise.defer = Promise.deferred=function(){
    var obj = {};
    obj.promise = new Promise(function(resolve,reject){
        obj.resolve = resolve;
        obj.reject = reject;
    })
    return obj;
}
    let fs = require("fs");
 function read2 (url){
    var deferr = Promise.deferred();
    fs.readFile("./1.txt","utf8",(err,res)=>{
        err?deferr.reject(err):deferr.resolve(res);
    })
     return deferr;
}
read2("./1.txt").then(data=>{console.log(data)})

至此，一个完整的Promise.js封装完成，当然最后是需要模块化导出的，我们采用CommonJS规范导出一个模块 采用

module.exports = Promise;