Promises是一種異步編程模型，通過一組API來規(guī)范化異步操作，這樣也能夠讓異步操作的流程控制更加容易。

下面的代碼是假設(shè)執(zhí)行一個異步隊(duì)列，每一項(xiàng)都會使用上一項(xiàng)返回的數(shù)據(jù)：

function nest(url, params, fn) {$.getJSON(url, params, function(data) {console.log(data);fn.call(this);}); } nest('promise.php', {a:1}, function(data1) {nest('promise.php', {b:2}, function(data2) {nest('promise.php', {c:3}, function(data3) {console.log('同步完成');});}); });

這是一個回調(diào)金字塔，當(dāng)異步的任務(wù)很多的時候，需要維護(hù)大量的callback。這嵌套的自己眼睛都看不清了吧。

Promise/A+規(guī)范就是為了解決上面的問題，可以用類似下面的代碼來改進(jìn)，“nest”也會做些修改：

promise.then(nest('promise.php', {a:1})).then(nest('promise.php', {b:2})).then(nest('promise.php', {c:3}));

下圖是改進(jìn)的圖片示例，我在畫圖的時候也感覺到，左邊的比較難畫，右邊的很好畫。

接下來會圍繞改進(jìn)金字塔，實(shí)現(xiàn)規(guī)范展開。

?

一、Promises/A+規(guī)范說明

Promises/A+規(guī)范如下：

1）一個promise可能有三種狀態(tài)：等待（pending）、已完成（fulfilled）、已拒絕（rejected）

2）一個promise的狀態(tài)只可能從“等待”轉(zhuǎn)到“完成”態(tài)或者“拒絕”態(tài)，不能逆向轉(zhuǎn)換，同時“完成”態(tài)和“拒絕”態(tài)不能相互轉(zhuǎn)換

3）promise必須實(shí)現(xiàn)then方法，而且then必須返回一個promise

4）同一個promise的then可以調(diào)用多次，并且回調(diào)的執(zhí)行順序跟它們被定義時的順序一致

5）then方法接受兩個參數(shù)，第一個參數(shù)是成功時的回調(diào)，在promise由“等待”態(tài)轉(zhuǎn)換到“完成”態(tài)時調(diào)用

6）另一個是失敗時的回調(diào)，在promise由“等待”態(tài)轉(zhuǎn)換到“拒絕”態(tài)時調(diào)用。

7）then可以接受另一個promise傳入，也接受一個“類then”的對象或方法，即thenable對象。

接下來先實(shí)現(xiàn)一個簡易的，只有完成狀態(tài)，沒有拒絕和等待狀態(tài)。

?

二、簡單實(shí)現(xiàn)

?

Promise對象的實(shí)現(xiàn)：

function Promise(fn) {this._status = 'pending';this._resolves = []; //隊(duì)列this._fn = fn;return this; } Promise.prototype = {then: function(resolve) {var next = this._next || (this._next = new Promise()); //下一個promise對象this._resolves.push(resolve); //設(shè)置隊(duì)列return next;},resolved: function(value) { //改變狀態(tài)this._status = 'fulfilled';this._result = (this._fn && this._fn(value)) || value;while (fn = this._resolves.shift()) { //循環(huán)調(diào)用隊(duì)列this._fire(this._next, fn);}},_fire: function(nextPromise, nextFn) {var nextResult = nextFn(this._result);if (nextResult instanceof Promise) { //判斷回調(diào)是否是Promise對象//只有當(dāng)nextResult的狀態(tài)為fulfilled，下一個promise才可以執(zhí)行nextResult.then(function(value) {nextPromise.resolved(value);});} else {nextPromise.resolved(nextResult);}} };

演示用的函數(shù)：

function nest2(url, params) {return function(pre) {var promise = new Promise();$.getJSON(url, params, function(data) {promise.resolved(data);});return promise;}; }function begin(value) {return value + '!'; }

初始化代碼：

var promise = new Promise(begin); promise.then(nest2('promise.php', {a: 1})).then(nest2('promise.php', {b: 2})); promise.resolved('開始');

也可以另外一種方式調(diào)用，這樣的話內(nèi)部的_resloves隊(duì)列中會有多個值

var promise = new Promise(begin);
promise.then(nest2('promise.php', {a: 1})) promise.then(nest2('promise.php', {b: 2})); promise.resolved('開始');

?

demo下載：

http://download.csdn.net/detail/loneleaf1/9391315

?

參考資料：

http://www.alloyteam.com/2014/05/javascript-promise-mode/?? JavaScript Promise啟示錄

http://www.cnblogs.com/fsjohnhuang/p/4135149.html?? JS魔法堂：剖析源碼理解Promises/A規(guī)范

http://www.cnblogs.com/aaronjs/archive/2012/11/17/2774440.html?? 使用Promises/A

http://rapheal.sinaapp.com/2013/01/26/jquery-src-deferred/?? $.Deferred

http://www.ituring.com.cn/article/66566?? Promises/A+規(guī)范

轉(zhuǎn)載于:https://www.cnblogs.com/strick/p/5092092.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript中Promises/A+规范的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。