JavaScript编程中的Promise使用大全_基础知识

尽管Promise已经有自己的规范，但目前的各类Promise库，在Promise的实现细节上是有差异的，部分API甚至在意义上完全不同。但Promise的核心内容，是相通的，它就是then方法。在相关术语中，promise指的就是一个有then方法，且该方法能触发特定行为的对象或函数。

Promise可以有不同的实现方式，因此Promise核心说明并不会讨论任何具体的实现代码。

先阅读Promise核心说明的意思是：看，这就是需要写出来的结果，请参照这个结果想一想怎么用代码写出来吧。

起步：用这一种方式理解Promise

回想一下Promise解决的是什么问题？回调。例如，函数doMission1()代表第一件事情，现在，我们想要在这件事情完成后，再做下一件事情doMission2()，应该怎么做呢？

先看看我们常见的回调模式。doMission1()说：“你要这么做的话，就把doMission2()交给我，我在结束后帮你调用。”所以会是：

复制代码 代码如下:

doMission1(doMission2);

Promise模式又是如何呢？你对doMission1()说：“不行，控制权要在我这里。你应该改变一下，你先返回一个特别的东西给我，然后我来用这个东西安排下一件事。”这个特别的东西就是Promise，这会变成这样：

复制代码 代码如下:

doMission1().then(doMission2);
 

可以看出，Promise将回调模式的主从关系调换了一个位置（翻身做主人！），多个事件的流程关系，就可以这样集中到主干道上（而不是分散在各个事件函数之内）。

好了，如何做这样一个转换呢？从最简单的情况来吧，假定doMission1()的代码是：

复制代码 代码如下:

function doMission1(callback){ 
  var value = 1; 
  callback(value); 
}

那么，它可以改变一下，变成这样：

复制代码 代码如下:

function doMission1(){ 
  return { 
    then: function(callback){ 
      var value = 1; 
      callback(value); 
    } 
  }; 
}
 

这就完成了转换。虽然并不是实际有用的转换，但到这里，其实已经触及了Promise最为重要的实现要点，即Promise将返回值转换为带then方法的对象。

进阶：Q的设计路程

从defer开始

design/q0.js是Q初步成型的第一步。它创建了一个名为defer的工具函数，用于创建Promise：

var defer = function () {
 var pending = [], value;
 return {
 resolve: function (_value) {
  value = _value;
  for (var i = 0, ii = pending.length; i < ii; i++) {
  var callback = pending[i];
  callback(value);
  }
  pending = undefined;
 },
 then: function (callback) {
  if (pending) {
  pending.push(callback);
  } else {
  callback(value);
  }
 }
 }
};

这段源码可以看出，运行defer()将得到一个对象，该对象包含resolve和then两个方法。请回想一下jQuery的Deferred（同样有resolve和then），这两个方法将会是近似的效果。then会参考pending的状态，如果是等待状态则将回调保存（push），否则立即调用回调。resolve则将肯定这个Promise，更新值的同时运行完所有保存的回调。defer的使用示例如下：

复制代码 代码如下:

var oneOneSecondLater = function () { 
  var result = defer(); 
  setTimeout(function () { 
    result.resolve(1); 
  }, 1000); 
  return result; 
};

oneOneSecondLater().then(callback);

这里oneOneSecondLater()包含异步内容（setTimeout），但这里让它立即返回了一个defer()生成的对象，然后将对象的resolve方法放在异步结束的位置调用（并附带上值，或者说结果）。

到此，以上代码存在一个问题：resolve可以被执行多次。因此，resolve中应该加入对状态的判断，保证resolve只有一次有效。这就是Q下一步的design/q1.js（仅差异部分）：

resolve: function (_value) {
 if (pending) {
 value = _value;
 for (var i = 0, ii = pending.length; i < ii; i++) {
  var callback = pending[i];
  callback(value);
 }
 pending = undefined;
 } else {
 throw new Error("A promise can only be resolved once.");
 }
}

对第二次及更多的调用，可以这样抛出一个错误，也可以直接忽略掉。

分离defer和promise

在前面的实现中，defer生成的对象同时拥有then方法和resolve方法。按照定义，promise关心的是then方法，至于触发promise改变状态的resolve，是另一回事。所以，Q接下来将拥有then方法的promise，和拥有resolve的defer分离开来，各自独立使用。这样就好像划清了各自的职责，各自只留一定的权限，这会使代码逻辑更明晰，易于调整。请看design/q3.js：（q2在此跳过）

var isPromise = function (value) {
 return value && typeof value.then === "function";
}; 

var defer = function () {
 var pending = [], value;
 return {
 resolve: function (_value) {
  if (pending) {
  value = _value;
  for (var i = 0, ii = pending.length; i < ii; i++) {
   var callback = pending[i];
   callback(value);
  }
  pending = undefined;
  }
 },
 promise: {
  then: function (callback) {
  if (pending) {
   pending.push(callback);
  } else {
   callback(value);
  }
  }
 }
 };
};

如果你仔细对比一下q1，你会发现区别很小。一方面，不再抛出错误（改为直接忽略第二次及更多的resolve），另一方面，将then方法移动到一个名为promise的对象内。到这里，运行defer()得到的对象（就称为defer吧），将拥有resolve方法，和一个promise属性指向另一个对象。这另一个对象就是仅有then方法的promise。这就完成了分离。

前面还有一个isPromise()函数，它通过是否有then方法来判断对象是否是promise（duck-typing的判断方法）。为了正确使用和处理分离开的promise，会像这样需要将promise和其他值区分开来。

实现promise的级联

接下来会是相当重要的一步。到前面到q3为止，所实现的promise都是不能级联的。但你所熟知的promise应该支持这样的语法：

复制代码 代码如下:

promise.then(step1).then(step2);

以上过程可以理解为，promise将可以创造新的promise，且取自旧的promise的值（前面代码中的value）。要实现then的级联，需要做到一些事情：

then方法必须返回promise。

这个返回的promise必须用传递给then方法的回调运行后的返回结果，来设置自己的值。

传递给then方法的回调，必须返回一个promise或值。

design/q4.js中，为了实现这一点，新增了一个工具函数ref：

复制代码 代码如下:

var ref = function (value) { 
  if (value && typeof value.then === "function") 
    return value; 
  return { 
    then: function (callback) { 
      return ref(callback(value)); 
    } 
  }; 
}; 

这是在着手处理与promise关联的value。这个工具函数将对任一个value值做一次包装，如果是一个promise，则什么也不做，如果不是promise，则将它包装成一个promise。注意这里有一个递归，它确保包装成的promise可以使用then方法级联。为了帮助理解它，下面是一个使用的例子：

复制代码 代码如下:

ref("step1").then(function(value){ 
  console.log(value); // "step1" 
  return 15; 
}).then(function(value){ 
  console.log(value); // 15 
});

你可以看到value是怎样传递的，promise级联需要做到的也是如此。

design/q4.js通过结合使用这个ref函数，将原来的defer转变为可级联的形式：

var defer = function () {
 var pending = [], value;
 return {
 resolve: function (_value) {
  if (pending) {
  value = ref(_value); // values wrapped in a promise
  for (var i = 0, ii = pending.length; i < ii; i++) {
   var callback = pending[i];
   value.then(callback); // then called instead
  }
  pending = undefined;
  }
 },
 promise: {
  then: function (_callback) {
  var result = defer();
  // callback is wrapped so that its return
  // value is captured and used to resolve the promise
  // that "then" returns
  var callback = function (value) {
   result.resolve(_callback(value));
  };
  if (pending) {
   pending.push(callback);
  } else {
   value.then(callback);
  }
  return result.promise;
  }
 }
 };
};

原来callback(value)的形式，都修改为value.then(callback)。这个修改后效果其实和原来相同，只是因为value变成了promise包装的类型，会需要这样调用。

then方法有了较多变动，会先新生成一个defer，并在结尾处返回这个defer的promise。请注意，callback不再是直接取用传递给then的那个，而是在此基础之上增加一层，并把新生成的defer的resolve方法放置在此。此处可以理解为，then方法将返回一个新生成的promise，因此需要把promise的resolve也预留好，在旧的promise的resolve运行后，新的promise的resolve也会随之运行。这样才能像管道一样，让事件按照then连接的内容，一层一层传递下去。

加入错误处理

promise的then方法应该可以包含两个参数，分别是肯定和否定状态的处理函数（onFulfilled与onRejected）。前面我们实现的promise还只能转变为肯定状态，所以，接下来应该加入否定状态部分。

请注意，promise的then方法的两个参数，都是可选参数。design/q6.js（q5也跳过）加入了工具函数reject来帮助实现promise的否定状态：

var reject = function (reason) {
 return {
 then: function (callback, errback) {
  return ref(errback(reason));
 }
 };
};

它和ref的主要区别是，它返回的对象的then方法，只会取第二个参数的errback来运行。design/q6.js的其余部分是：

var defer = function () {
 var pending = [], value;
 return {
 resolve: function (_value) {
  if (pending) {
  value = ref(_value);
  for (var i = 0, ii = pending.length; i < ii; i++) {
   value.then.apply(value, pending[i]);
  }
  pending = undefined;
  }
 },
 promise: {
  then: function (_callback, _errback) {
  var result = defer();
  // provide default callbacks and errbacks
  _callback = _callback || function (value) {
   // by default, forward fulfillment
   return value;
  };
  _errback = _errback || function (reason) {
   // by default, forward rejection
   return reject(reason);
  };
  var callback = function (value) {
   result.resolve(_callback(value));
  };
  var errback = function (reason) {
   result.resolve(_errback(reason));
  };
  if (pending) {
   pending.push([callback, errback]);
  } else {
   value.then(callback, errback);
  }
  return result.promise;
  }
 }
 };
};

这里的主要改动是，将数组pending只保存单个回调的形式，改为同时保存肯定和否定的两种回调的形式。而且，在then中定义了默认的肯定和否定回调，使得then方法满足了promise的2个可选参数的要求。

你也许注意到defer中还是只有一个resolve方法，而没有类似jQuery的reject。那么，错误处理要如何触发呢？请看这个例子：

var defer1 = defer(),
promise1 = defer1.promise;
promise1.then(function(value){
 console.log("1: value = ", value);
 return reject("error happens");
}).then(function(value){
 console.log("2: value = ", value);
}).then(null, function(reason){
 console.log("3: reason = ", reason);
});
defer1.resolve(10); 

// Result:
// 1: value = 10
// 3: reason = error happens

可以看出，每一个传递给then方法的返回值是很重要的，它将决定下一个then方法的调用结果。而如果像上面这样返回工具函数reject生成的对象，就会触发错误处理。

融入异步

终于到了最后的design/q7.js。直到前面的q6，还存在一个问题，就是then方法运行的时候，可能是同步的，也可能是异步的，这取决于传递给then的函数（例如直接返回一个值，就是同步，返回一个其他的promise，就可以是异步）。这种不确定性可能带来潜在的问题。因此，Q的后面这一步，是确保将所有then转变为异步。

design/q7.js定义了另一个工具函数enqueue：

复制代码 代码如下:

var enqueue = function (callback) { 
  //process.nextTick(callback); // NodeJS 
  setTimeout(callback, 1); // Na?ve browser solution 
};

显然，这个工具函数会将任意函数推迟到下一个事件队列运行。

design/q7.js其他的修改点是（只显示修改部分）：

var ref = function (value) {
 // ...
 return {
 then: function (callback) {
  var result = defer();
  // XXX
  enqueue(function () {
  result.resolve(callback(value));
  });
  return result.promise;
 }
 };
}; 

var reject = function (reason) {
 return {
 then: function (callback, errback) {
  var result = defer();
  // XXX
  enqueue(function () {
  result.resolve(errback(reason));
  });
  return result.promise;
 }
 };
}; 

var defer = function () {
 var pending = [], value;
 return {
 resolve: function (_value) {
  // ...
   enqueue(function () {
   value.then.apply(value, pending[i]);
   });
  // ...
 },
 promise: {
  then: function (_callback, _errback) {
   // ...
   enqueue(function () {
   value.then(callback, errback);
   });
   // ...
  }
 }
 };
};

即把原来的value.then的部分，都转变为异步。

到此，Q提供的Promise设计原理q0~q7，全部结束。

结语

即便本文已经是这么长的篇幅，但所讲述的也只到基础的Promise。大部分Promise库会有更多的API来应对更多和Promise有关的需求，例如all()、spread()，不过，读到这里，你已经了解了实现Promise的核心理念，这一定对你今后应用Promise有所帮助。

在我看来，Promise是精巧的设计，我花了相当一些时间才差不多理解它。Q作为一个典型Promise库，在思路上走得很明确。可以感受到，再复杂的库也是先从基本的要点开始的，如果我们自己要做类似的事，也应该保持这样的心态一点一点进步。

以上就是本文的全部内容，希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， 异步编程
promise
javascript promise、javascript中promise、promise异步编程、promise编程、promise异步编程模式，以便于您获取更多的相关知识。

时间： 2024-09-10 22:26:33

JavaScript编程中的Promise使用大全_基础知识的相关文章

深入解析JavaScript编程中的this关键字使用_基础知识

JavaScript 里的 this 到底指得是什么?很多人都会告诉你 this 指的是当前对象.这样理解对么?在大多数情况下确实没错.比如我们经常会在网页上写这样的 JavaScript: <input type="submit" value="提交" onclick="this.value='正在提交数据'" /> 这里的this显然指的是当前对象,即这个提交按钮.通常,我们使用this的情况都与此类似.但是有什么情况不是这样的呢

在JavaScript应用中实现延迟加载的方法_基础知识

无论简单还是复杂的Web应用,都由一些HTML.JavaScript.CSS文件组成.通常开发者会通过JQuery.Knockout.Underscore等等这样的第三方JavaScript框架来提高开发速度.由于这些JavaScript框架都针对特定的用途开发而且已经得到了"验证",所以直接使用它们就比自己从头实现所需要的功能显得更为合适.然而,伴随着应用的复杂度不断上升,写出干净.低耦合.可维护的代码变得越来越重要.在这篇文章里,我将解释RequireJS框架如何帮助应用开发者写出

javascript编程起步（第一课）_基础知识

不管你以前学没有学过java script,本教程都能带您进入java script的殿堂,领悟java script的魅力.   大家来到这里,都是java script的爱好者,对java script都多多少少有一定的理解.关于java script的历史等就不做介绍了,我们直接来学习它,用它.   也许大部分人都认为java script是在客户端运行的,其实不然.java script有两种不同的运行环境,一个是在服务器端的javascript,另一个就是客户端的javascript了

javascript编程起步（第二课）_基础知识

今天我们主要学习的内容有以下几块:   1.java script变量   2.java script表达式和运算符   可以用var加上为变量指定的名称来声明变量,变量类型可以通过给变量赋值来确定.由于java script采用的是弱类型的样式,对数据类型要求不太严格,在程序执行的过程中,会根据需要自动转换.   对于字符串变量,可以通过"变量名.length"来获得该变量中字符串的长度,如   var name;   name="java script";   

深入理解Java线程编程中的阻塞队列容器_基础知识

1. 什么是阻塞队列? 阻塞队列(BlockingQueue)是一个支持两个附加操作的队列.这两个附加的操作是:在队列为空时,获取元素的线程会等待队列变为非空.当队列满时,存储元素的线程会等待队列可用.阻塞队列常用于生产者和消费者的场景,生产者是往队列里添加元素的线程,消费者是从队列里拿元素的线程.阻塞队列就是生产者存放元素的容器,而消费者也只从容器里拿元素. 阻塞队列提供了四种处理方法: 抛出异常:是指当阻塞队列满时候,再往队列里插入元素,会抛出IllegalStateException("Q

JavaScript的代码编写格式规范指南_基础知识

对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注. 本文浅谈 JavaScript 编程中关

详细解读JavaScript编程中的Promise使用_基础知识

Promise核心说明 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同.但Promise的核心内容,是相通的,它就是then方法.在相关术语中,promise指的就是一个有then方法,且该方法能触发特定行为的对象或函数. Promise可以有不同的实现方式,因此Promise核心说明并不会讨论任何具体的实现代码. 先阅读Promise核心说明的意思是:看,这就是需要写出来的结果,请参照这个结果想一想怎么用

Javascript中的数据类型之旅_基础知识

虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型,Object   由无序的键值对组成.其余几种都属于简单数据类型.注意:变量类型首字母大写,而变量值首字母是小写的. JavaScript不支持自定义类型,所以JavaScript中的所有值都属于这六种类型之一. 根据ECMAScript 5.1的规范,javascript中共有六种数据类型,分别为

javascript中var的重要性分析_基础知识

本文实例分析了javascript中var的重要性.分享给大家供大家参考.具体分析如下: javascript 的 var 作用是声明变量. 一般情况下不写都不会出错,但有些情况如果不写,会有不同的结果.先看下面的示例: <div id="a"></div> <script type="text/javascript"> a = 1; alert(a); </script> 上面这个例子在FF Chrome执行不会有问