promise原理之常用方法原理

原型上的方法

1.catch

catch方法用于抓取promise中离catch方法最近的一次错误

let p=new Promise(function (resolve,reject) {
  resolve(123)
})
p.then(function (data) {
  return new Promise(function (resolve, reject) {
    reject(456);
  });
}).then(function(data){
 return data;
}).catch(function (data) {
  console.log(data)
})
//log：456

>> 封装

Promise.prototype.catch=function(errCallback){
  return this.then(null,errCallback);
}

2.finally

finally用于无论promise进入成功态resolve还是失败态reject都会执行的

promise.finally(function(){
  alert('promise执行时无论成功还是失败都执行，属于ES 2018或ES 2019规范提案')
})

>> 封装

Promise.prototype.finally=function(callback){
  return this.then(function(data){
    callback()
    return data
  },function(reason){
    callback();
    return reason;
  })
}

类上的方法

1.resolve

让promise进入成功态

Promise.resolve(123).then(function(data){
  console.log(data);
})
log:123;

>> 封装

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

2.reject

让promise进入失败态

Promise.reject(123).then(null,function(data){
  console.log(data);
})
log:123;

>> 封装

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

3.all

接收一个数组做参数，返回一个promise，当数组里边的promise都执行成功才会resolve向下传递，传递一个所有promise的返回值组成的数组,有一个报错就走错误reject。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

>> 封装

Promise.all=function(promiseList){
  return new Promise(function (resolve, reject) {
     let arr=[],i=0;//纪录向下传递的数组和总共执行的次数
     promiseList.forEach(function(curPromise,index){
        if(typeof curPromise == 'object'&&curPromise.then){//说明是promise
           curPromise.then(function(data){
              arr[index]=data;
              i++;
              if(i==promiseList.length){//数组执行结束
                 resolve(arr)
              }
           })
        }else{
          arr[index]=curPromise;
          i++;
          if(i==promiseList.length){//数组执行结束
              resolve(arr)
          }
        }
    })
  })
}

4.race

传入一个数组，返回一个promise，其中哪个promise先执行完就导出哪个promise的结果

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});
var p3=123;
Promise.race([p1, p2, p3]).then(function(value) {
  console.log(value); //123
  //返回最先完成那个
});

>> 封装

Promise.race = function (promises) {
  return new Promise(function (r, reject) {
    for (let i = 0; i < promises.length; i++) {
      if(typeof  promises[i]=== 'object' &&  promises[i].then){
        promises[i].then(r,reject);
      }else{
        r(promises[i])
      }
    }
  })
}

5.deferred

基于promise的延迟对象

>> 封装

Promise.deferred = Promise.defer = function () {
  let dfd = {}
  dfd.promise = new Promise(function (resolve, reject) {
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
}