JavaScript編程中的Promise使用大全

2024-05-06 16:23:56

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JavaScript中的Promise使用詳解,promise對象是JS進階學習中的重要知識點,需要了解的朋友可以參考下

盡管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);

  }

}

}

};