javascript中Promise原理是什么

本篇内容主要讲解“javascript中Promise原理是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript中Promise原理是什么”吧!

为阿合奇等地区用户提供了全套网页设计制作服务，及阿合奇网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、阿合奇网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

引子

为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。

考虑下面一种获取用户id的请求处理

//例1  function getUserId() {      return new Promise(function(resolve) {          //异步请求          http.get(url, function(results) {              resolve(results.id)          })      })  }     getUserId().then(function(id) {      //一些处理  })

getUserId方法返回一个promise，可以通过它的then方法注册(注意注册这个词)在promise异步操作成功时执行的回调。这种执行方式，使得异步调用变得十分顺手。

原理剖析

那么类似这种功能的Promise怎么实现呢?其实按照上面一句话，实现一个最基础的雏形还是很easy的。

极简promise雏形

function Promise(fn) {      var value = null,          callbacks = [];  //callbacks为数组，因为可能同时有很多个回调         this.then = function (onFulfilled) {          callbacks.push(onFulfilled);      };         function resolve(value) {          callbacks.forEach(function (callback) {              callback(value);          });      }         fn(resolve);  }

上述代码很简单，大致的逻辑是这样的：

1. 调用then方法，将想要在Promise异步操作成功时执行的回调放入callbacks队列，其实也就是注册回调函数，可以向观察者模式方向思考;

2. 创建Promise实例时传入的函数会被赋予一个函数类型的参数，即resolve，它接收一个参数value，代表异步操作返回的结果，当一步操作执行成功后，用户会调用resolve方法，这时候其实真正执行的操作是将callbacks队列中的回调一一执行;

可以结合例1中的代码来看，首先new  Promise时，传给promise的函数发送异步请求，接着调用promise对象的then属性，注册请求成功的回调函数，然后当异步请求发送成功时，调用resolve(results.id)方法,  该方法执行then方法注册的回调数组。

相信仔细的人应该可以看出来，then方法应该能够链式调用，但是上面的最基础简单的版本显然无法支持链式调用。想让then方法支持链式调用，其实也是很简单的：

this.then = function (onFulfilled) {      callbacks.push(onFulfilled);      return this;  };

see?只要简单一句话就可以实现类似下面的链式调用：

// 例2  getUserId().then(function (id) {      // 一些处理  }).then(function (id) {      // 一些处理  });

加入延时机制

细心的同学应该发现，上述代码可能还存在一个问题：如果在then方法注册回调之前，resolve函数就执行了，怎么办?比如promise内部的函数是同步函数：

// 例3  function getUserId() {      return new Promise(function (resolve) {          resolve(9876);      });  }  getUserId().then(function (id) {      // 一些处理  });

这显然是不允许的，Promises/A+规范明确要求回调需要通过异步方式执行，用以保证一致可靠的执行顺序。因此我们要加入一些处理，保证在resolve执行之前，then方法已经注册完所有的回调。我们可以这样改造下resolve函数:

function resolve(value) {      setTimeout(function() {          callbacks.forEach(function (callback) {              callback(value);          });      }, 0)  }

上述代码的思路也很简单，就是通过setTimeout机制，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.

但是，这样好像还存在一个问题，可以细想一下：如果Promise异步操作已经成功，这时，在异步操作成功之前注册的回调都会执行，但是在Promise异步操作成功这之后调用的then注册的回调就再也不会执行了，这显然不是我们想要的。

加入状态

恩，为了解决上一节抛出的问题，我们必须加入状态机制，也就是大家熟知的pending、fulfilled、rejected。

Promises/A+规范中的2.1Promise  States中明确规定了，pending可以转化为fulfilled或rejected并且只能转化一次，也就是说如果pending转化到fulfilled状态，那么就不能再转化到rejected。并且fulfilled和rejected状态只能由pending转化而来，两者之间不能互相转换。一图胜千言：

改进后的代码是这样的：

function Promise(fn) {      var state = 'pending',          value = null,          callbacks = [];         this.then = function (onFulfilled) {          if (state === 'pending') {              callbacks.push(onFulfilled);              return this;          }          onFulfilled(value);          return this;      };         function resolve(newValue) {          value = newValue;          state = 'fulfilled';          setTimeout(function () {              callbacks.forEach(function (callback) {                  callback(value);              });          }, 0);      }         fn(resolve);  }

上述代码的思路是这样的：resolve执行时，会将状态设置为fulfilled，在此之后调用then添加的新回调，都会立即执行。

这里没有任何地方将state设为rejected，为了让大家聚焦在核心代码上，这个问题后面会有一小节专门加入。

链式Promise

那么这里问题又来了，如果用户再then函数里面注册的仍然是一个Promise，该如何解决?比如下面的例4：

// 例4  getUserId()      .then(getUserJobById)      .then(function (job) {          // 对job的处理      });     function getUserJobById(id) {      return new Promise(function (resolve) {          http.get(baseUrl + id, function(job) {              resolve(job);          });      });  }

这种场景相信用过promise的人都知道会有很多，那么类似这种就是所谓的链式Promise。

链式Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise(后邻promise)。那么我们如何衔接当前promise和后邻promise呢?(这是这里的难点)。

其实也不是辣么难，只要在then方法里面return一个promise就好啦。Promises/A+规范中的2.2.7就是这么说哒(微笑脸)~

下面来看看这段暗藏玄机的then方法和resolve方法改造代码：

function Promise(fn) {      var state = 'pending',          value = null,          callbacks = [];         this.then = function (onFulfilled) {          return new Promise(function (resolve) {              handle({                  onFulfilled: onFulfilled || null,                  resolve: resolve              });          });      };         function handle(callback) {          if (state === 'pending') {              callbacks.push(callback);              return;          }          //如果then中没有传递任何东西          if(!callback.onResolved) {              callback.resolve(value);              return;          }             var ret = callback.onFulfilled(value);          callback.resolve(ret);      }               function resolve(newValue) {          if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {              var then = newValue.then;              if (typeof then === 'function') {                  then.call(newValue, resolve);                  return;              }          }          state = 'fulfilled';          value = newValue;          setTimeout(function () {              callbacks.forEach(function (callback) {                  handle(callback);              });          }, 0);      }         fn(resolve);  }

我们结合例4的代码，分析下上面的代码逻辑，为了方便阅读，我把例4的代码贴在这里：

// 例4  getUserId()      .then(getUserJobById)      .then(function (job) {          // 对job的处理      });     function getUserJobById(id) {      return new Promise(function (resolve) {          http.get(baseUrl + id, function(job) {              resolve(job);          });      });  }

1. then方法中，创建并返回了新的Promise实例，这是串行Promise的基础，并且支持链式调用。

2. handle方法是promise内部的方法。then方法传入的形参onFulfilled以及创建新Promise实例时传入的resolve均被push到当前promise的callbacks队列中，这是衔接当前promise和后邻promise的关键所在(这里一定要好好的分析下handle的作用)。

3. getUserId生成的promise(简称getUserId  promise)异步操作成功，执行其内部方法resolve，传入的参数正是异步操作的结果id

4. 调用handle方法处理callbacks队列中的回调：getUserJobById方法，生成新的promise(getUserJobById  promise)

5. 执行之前由getUserId promise的then方法生成的新promise(称为bridge  promise)的resolve方法，传入参数为getUserJobById  promise。这种情况下，会将该resolve方法传入getUserJobById promise的then方法中，并直接返回。

6. 在getUserJobById promise异步操作成功时，执行其callbacks中的回调：getUserId bridge  promise中的resolve方法

7. ***执行getUserId bridge promise的后邻promise的callbacks中的回调。

更直白的可以看下面的图，一图胜千言(都是根据自己的理解画出来的，如有不对欢迎指正)：

失败处理

在异步操作失败时，标记其状态为rejected，并执行注册的失败回调:

//例5  function getUserId() {      return new Promise(function(resolve) {          //异步请求          http.get(url, function(error, results) {              if (error) {                  reject(error);              }              resolve(results.id)          })      })  }     getUserId().then(function(id) {      //一些处理  }, function(error) {      console.log(error)  })

有了之前处理fulfilled状态的经验，支持错误处理变得很容易,只需要在注册回调、处理状态变更上都要加入新的逻辑：

function Promise(fn) {      var state = 'pending',          value = null,          callbacks = [];         this.then = function (onFulfilled, onRejected) {          return new Promise(function (resolve, reject) {              handle({                  onFulfilled: onFulfilled || null,                  onRejected: onRejected || null,                  resolve: resolve,                  reject: reject              });          });      };         function handle(callback) {          if (state === 'pending') {              callbacks.push(callback);              return;          }             var cb = state === 'fulfilled' ? callback.onFulfilled : callback.onRejected,              ret;          if (cb === null) {              cb = state === 'fulfilled' ? callback.resolve : callback.reject;              cb(value);              return;          }          ret = cb(value);          callback.resolve(ret);      }         function resolve(newValue) {          if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {              var then = newValue.then;              if (typeof then === 'function') {                  then.call(newValue, resolve, reject);                  return;              }          }          state = 'fulfilled';          value = newValue;          execute();      }         function reject(reason) {          state = 'rejected';          value = reason;          execute();      }         function execute() {          setTimeout(function () {              callbacks.forEach(function (callback) {                  handle(callback);              });          }, 0);      }         fn(resolve, reject);  }

上述代码增加了新的reject方法，供异步操作失败时调用，同时抽出了resolve和reject共用的部分，形成execute方法。

错误冒泡是上述代码已经支持，且非常实用的一个特性。在handle中发现没有指定异步操作失败的回调时，会直接将bridge  promise(then函数返回的promise，后同)设为rejected状态，如此达成执行后续失败回调的效果。这有利于简化串行Promise的失败处理成本，因为一组异步操作往往会对应一个实际功能，失败处理方法通常是一致的：

//例6  getUserId()      .then(getUserJobById)      .then(function (job) {          // 处理job      }, function (error) {          // getUserId或者getUerJobById时出现的错误          console.log(error);      });

异常处理

细心的同学会想到：如果在执行成功回调、失败回调时代码出错怎么办?对于这类异常，可以使用try-catch捕获错误，并将bridge  promise设为rejected状态。handle方法改造如下：

function handle(callback) {      if (state === 'pending') {          callbacks.push(callback);          return;      }         var cb = state === 'fulfilled' ? callback.onFulfilled : callback.onRejected,          ret;      if (cb === null) {          cb = state === 'fulfilled' ? callback.resolve : callback.reject;          cb(value);          return;      }      try {          ret = cb(value);          callback.resolve(ret);      } catch (e) {          callback.reject(e);      }  }

如果在异步操作中，多次执行resolve或者reject会重复处理后续回调，可以通过内置一个标志位解决。

到此，相信大家对“javascript中Promise原理是什么”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！