Promise原理与实现探究的一种思路

时间  2019-11-06
标签 promise 原理 实现 探究 一种 思路 繁體版
原文   原文链接

写在前面

这个文章，展示的是一个实现Promise的思路，以及如何发现和处理问题的情境。git

从现有的Promise分析

若是咱们想要本身实现一个简单的Promise，那现有规范规定的Promise确定是咱们最好的参照。es6

咱们先看下Promise怎么使用：github

var promise1 = new Promise(function(resolve, reject){
      // 成功后的TODO
      resolve(value);
      // 失败后的TODO
      reject(err);
})

来看下返回的promise1是什么，以及它的结构是怎么样的：数组

image

再进行一些具体操做promise

var promise1 = new Promise(function(resolve, reject) {
    resolve('zqz')
})

promise1.then(function(result) {
   console.log(result) 
}).catch(function(err){
   console.log(err) 
})

// => 'zqz'

11

var promise1 = new Promise(function(resolve, reject) {
    reject('出现异常')
})
promise1.then(function(result) {
   console.log(result) 
}).catch(function(err){
   console.log(err) 
})

// => '出现异常'

22

从Promise的 使用方式上 和 实例 能够看到哪些东西：框架

  • Promise是一个构造函数
  • Promise包含一个参数，这个参数类型是一个_匿名函数_
  • 匿名函数包括2个形参，分别是 reject 和 resolve
  • 这两个形参类型是 函数 ，且 reject 和 resolve 都有一个参数， 参数类型不限定
  • 实例 是个 Promise
  • 实例的 原型 上挂载了 2个方法，分别是 then 和 catch，同时then能够有多个，因此须要一个回掉函数队列
  • 实例上 有2个属性，分别是 PromiseStatus 和 PromiseValue
  • Promise根据定义 PromiseStatus 须要有 3种状态，分别是 pending, fulfilled，rejected

根据上面的分析状况，咱们先简单的来构造一个雏形。异步

function Promise(fn) {
  this.PromiseStatus = 'pending';
  this.PromiseValue = '';

  this.resolvedCb = [];
  this.rejectedCb = [];

  var self = this;

  var resolve = function (result) {
    // 判断状态
     if (self.PromiseStatus === 'pending') {
      self.PromiseStatus = 'resolved';
      self.PromiseValue = result;
       // resolvedCb 队列依次执行
       for (var i = 0;i < self.resolvedCb.length; i++) {
         self.resolvedCb[i](result)
       }
     }
   }
 
   var reject = function (err) {
     // 判断状态
     if (self.PromiseStatus === 'pending') {
        self.PromiseStatus = 'rejected';
        self.PromiseValue = err;
       
        // rejectedCb 队列依次执行
       for (var i = 0;i < self.rejectedCb.length; i++) {
         self.rejectedCb[i](result)
       }
     }
   }
 
 // 错误处理 -> rejected
  try {
    fn(resolve, reject)
  } catch(e) {
    reject(e)
  }
  
}

固然这还不够，由于重要的两个功能then和catch尚未实现。async

从现有的 then 分析

分析下then的使用函数

promise1.then(function(value){
   // todo
   return value;
})
.then(function(value1){
    // todo
    return value1;
})
.then(function(value2){
  // todo
  return value2;
})
  • promise1 返回的值 须要塞到第一个then中函数的value上
  • 链式调用,屡次调用
  • then返回的是一个新的Promise
  • then能够接受2个函数做为参数，一个是成功函数，一个是失败函数
  • return 的值 直接做为下个 then 中匿名函数的入参

根据Promise返回的实例，咱们可看出来then是挂载在 Promise 的原型链上。测试

咱们先实现一个大致的框架：

Promise.prototype.then = function (handleSuccess, handleFail) {
    var self = this;
    var PromiseStatus = this.PromiseStatus;

    if(typeof handleSuccess === 'function') {
      handleSuccess = handleSuccess;
    } else {
      handleSuccess = function (result) {}
    }

    if(typeof handleFail === 'function') {
      handleFail = handleFail;
    } else {
      handleFail = function (err) {}
    }

    if(PromiseStatus === 'pending') {
        return new Promise(function(resolve, reject) {
          self.resolvedCb.push(handleSuccess);
          self.rejectedCb.push(handleFail);
        })
    }

    if(PromiseStatus === 'resolved') {
        return new Promise(function(resolve, reject) {
          var result = handleSuccess(self.PromiseValue);
          resolve(result);
        })
    }

    if(PromiseStatus === 'rejected') {
      return new Promise(function(resolve, reject) {
        var result = handleFail(self.PromiseValue);
        reject(result);
      })
    }
    
}

咱们先用一下，看下是否符合指望

方式一(无异步操做)：

function promise1() {
  return new Promise(function(resolve, reject){
      console.log('执行promise1')
      resolve('zqz');
  })
}

promise1().then(function(result){
  console.log('执行1', 'result:'+result)
  return result + '11';
})
.then(function(result){
    console.log('执行2', 'result:'+result)
  return result + '22';
})
// => 执行promise1
// => 执行1 result:zqz
// => 执行2 result:zqz11
// => Promise {PromiseStatus: "resolved", PromiseValue: "zqz1122", resolvedCb: Array(0), rejectedCb: Array(0)}

这样使用没有问题！

方式二（有异步操做）：

function promise1() {
  return new Promise(function(resolve, reject){
    // 异步操做
    setTimeout(function(){
      console.log('执行promise1')
      resolve('zqz');
    },1000)

  })
}

promise1().then(function(result){
  console.log('执行1', 'result:'+result)
  return result + '11';
})
.then(function(result){
    console.log('执行2', 'result:'+result)
  return result + '22';
})
// => 执行promise1
// => 执行1 result:zqz

一旦出现异步操做，就有问题！很明显，Promise的主要做用就是控制异步操做的执行顺序。

确定是哪里有问题，咱们来分析一下，异步的时候 有哪些 不一样

  • 当有异步操做(xhr,setTimeout等)的时候，这时候PromiseStatus是pending状态

在来看下咱们在pending时候的处理

...
// 异步时
if(PromiseStatus === 'pending') {
        return new Promise(function(resolve, reject) {
         // 这里只是将函数塞入队列，而后就没有而后来。。。这是有问题的
          self.resolvedCb.push(handleSuccess);
          self.rejectedCb.push(handleFail);
        })
    }
...

这时候咱们的两个数组:resolvedCb和rejectedCb就发挥做用了，因为咱们不知道异步何时结束，可是咱们能够根据他们定义的前后顺序注入到 队列 中，而后根据 顺序 依次执行，这样也就保证了异步操做的执行顺序。

if(PromiseStatus === 'pending') {
        return new Promise(function(resolve, reject) {
         // 一个个的塞入队列
          self.resolvedCb.push(function(result) {
              var res = handleSuccess(self.PromiseValue);
              resolve(res);
          })
          self.rejectedCb.push(function(err) {
              var er = handleFail(self.PromiseValue);
              reject(er);
          })
        })
    }

这时候咱们用多个异步操做来测试一下

function async1() {
  return new Promise(function(resolve, reject){
    // 异步操做
    setTimeout(function(){
      console.log('执行async1')
      resolve('zqz1');
    },3000)
  })
}
function async2() {
  return new Promise(function(resolve, reject){
    // 异步操做
    setTimeout(function(){
      console.log('执行async2')
      resolve('zqz2');
    },1000)
  })
}
function async3() {
  return new Promise(function(resolve, reject){
    // 异步操做
    setTimeout(function(){
      console.log('执行async3')
      resolve('zqz3');
    },2000)
  })
}

// return 一个新的promise
async1().then(function(result){
   console.log('result = ' + result)
   return async2();
}).then(function(result){
   console.log('result = ' + result)
   return async3();
}).then(function(result){
   console.log('result = ' + result)
   return result;
})

// => Promise {PromiseStatus: "pending", PromiseValue: "", resolvedCb: Array(0), rejectedCb: Array(0)}
// => 执行async1
// => result = zqz1
// => result = [object Object]
// => result = [object Object]
// => 执行async2
// => 执行async3

这里有两个问题：

  • 返回promise的时候，执行顺序有问题
  • 返回promise的时候，没法进行值的传递

咱们再来分析下，着重看下下面这块代码

...
if(PromiseStatus === 'pending') {
        return new Promise(function(resolve, reject) {
          self.resolvedCb.push(function(result) {
              // 这里返回的res有多是promise,可是咱们没有作处理
              var res = handleSuccess(self.PromiseValue);
              resolve(res);
          })
          self.rejectedCb.push(function(err) {
              // 这里返回的res有多是promise,可是咱们没有作处理
              var er = handleFail(self.PromiseValue);
              reject(er);
          })
        })
    }
...

由于咱们返回的是Promise，因为咱们没有作处理，致使没法正确的获取到值。

...
if(PromiseStatus === 'pending') {
        return new Promise(function(resolve, reject) {
          self.resolvedCb.push(function(result) {
              var res = handleSuccess(self.PromiseValue);
              if (res instanceof Promise) {
                   res.then(resolve, reject);
              } else {
                   resolve(res);
              } 
          })
          self.rejectedCb.push(function(err) {
              var er = handleFail(self.PromiseValue);
              if (er instanceof Promise) {
                   er.then(resolve, reject);
              } else {
                   reject(er);
              }
          })
        })
    }
...

若是返回的是一个Promise，就继续塞入到then里面。

在执行一下：

async1().then(function(result){
   console.log('result = ' + result)
   return async2();
}).then(function(result){
   console.log('result = ' + result)
   return async3();
}).then(function(result){
   console.log('result = ' + result)
   return result;
})

// => Promise {PromiseStatus: "pending", PromiseValue: "", resolvedCb: Array(0), rejectedCb: Array(0)}
// => 执行async1
// => result = zqz1
// => 执行async2
// => result = zqz2
// => 执行async3
// => result = zqz3

最后一个简单完整的 then:

Promise.prototype.then = function (handleSuccess, handleFail) {
    var self = this;
    var PromiseStatus = this.PromiseStatus;

    if(typeof handleSuccess === 'function') {
      handleSuccess = handleSuccess;
    } else {
      handleSuccess = function (result) {}
    }

    if(typeof handleFail === 'function') {
      handleFail = handleFail;
    } else {
      handleFail = function (err) {}
    }

    if(PromiseStatus === 'pending') {
        return new Promise(function(resolve, reject) {
          self.resolvedCb.push(function(result) {
              var res = handleSuccess(self.PromiseValue);
              if (res instanceof Promise) {
                   res.then(resolve, reject);
              } else {
                  resolve(er);
              } 
          })
          self.rejectedCb.push(function(err) {
              var er = handleFail(self.PromiseValue);
              if (er instanceof Promise) {
                   er.then(resolve, reject);
              } else {
                  reject(er);
              } 
          })
        })
    }
    if(PromiseStatus === 'resolved') {
        return new Promise(function(resolve, reject) {
          var result = handleSuccess(self.PromiseValue);
          resolve(result);
        })
    }
    if(PromiseStatus === 'rejected') {
      return new Promise(function(resolve, reject) {
        var result = handleFail(self.PromiseValue);
        reject(result);
      })
    }
    
}

参考

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程