資訊專欄INFORMATION COLUMN
摘要：我們可以進(jìn)行適當(dāng)?shù)母倪M(jìn)，把回調(diào)函數(shù)寫到外面即使是改寫成這樣，代碼還是不夠直觀，但是如果有了對(duì)象，代碼就可以寫得非常清晰，一目了然，請(qǐng)看這樣函數(shù)就不用寫在的回調(diào)中了目前的標(biāo)準(zhǔn)中還未支持對(duì)象，那么我們就自己動(dòng)手，豐衣足食吧。
本文同步自我得博客：http://www.joeray61.com
很多做前端的朋友應(yīng)該都聽(tīng)說(shuō)過(guò)Promise（或者Deferred）對(duì)象，今天我就講一下我對(duì)Promise的認(rèn)識(shí)
What？Promise是CommonJS的規(guī)范之一，擁有resolve、reject、done、fail、then等方法，能夠幫助我們控制代碼的流程，避免函數(shù)的多層嵌套。如今異步在web開(kāi)發(fā)中越來(lái)越重要，對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，這種非線性執(zhí)行的編程會(huì)讓開(kāi)發(fā)者覺(jué)得難以掌控，而Promise可以讓我們更好地掌控代碼的執(zhí)行流程,jQuery等流行的js庫(kù)都已經(jīng)實(shí)現(xiàn)了這個(gè)對(duì)象，年底即將發(fā)布的ES6也將原生實(shí)現(xiàn)Promise
Why想象這樣一個(gè)場(chǎng)景，兩個(gè)異步請(qǐng)求，第二個(gè)需要用到第一個(gè)請(qǐng)求成功的數(shù)據(jù)，那么我們代碼可以這樣寫
ajax({
url: url1,
success: function(data) {
ajax({
url: url2,
data: data,
success: function() {
}
});
}
});
如果繼續(xù)下去在回調(diào)函數(shù)中進(jìn)行下一步操作，嵌套的層數(shù)會(huì)越來(lái)越多。我們可以進(jìn)行適當(dāng)?shù)母倪M(jìn)，把回調(diào)函數(shù)寫到外面
function A() {
ajax({
url: url1,
success: function(data) {
B(data);
}
});
}
function B(data) {
ajax({
url: url2,
success: function(data) {
......
}
});
}
即使是改寫成這樣，代碼還是不夠直觀，但是如果有了Promise對(duì)象，代碼就可以寫得非常清晰，一目了然，請(qǐng)看
new Promise(A).done(B);
這樣函數(shù)B就不用寫在A的回調(diào)中了
How目前的ES標(biāo)準(zhǔn)中還未支持Promise對(duì)象，那么我們就自己動(dòng)手，豐衣足食吧。思路大致是這樣的，用2個(gè)數(shù)組(doneList和failList)分別存儲(chǔ)成功時(shí)的回調(diào)函數(shù)隊(duì)列和失敗時(shí)的回調(diào)隊(duì)列
state: 當(dāng)前執(zhí)行狀態(tài)，有pending、resolved、rejected3種取值
done: 向doneList中添加一個(gè)成功回調(diào)函數(shù)
fail: 向failList中添加一個(gè)失敗回調(diào)函數(shù)
then: 分別向doneList和failList中添加回調(diào)函數(shù)
always: 添加一個(gè)無(wú)論成功還是失敗都會(huì)調(diào)用的回調(diào)函數(shù)
resolve: 將狀態(tài)更改為resolved,并觸發(fā)綁定的所有成功的回調(diào)函數(shù)
reject: 將狀態(tài)更改為rejected,并觸發(fā)綁定的所有失敗的回調(diào)函數(shù)
when: 參數(shù)是多個(gè)異步或者延遲函數(shù)，返回值是一個(gè)Promise兌現(xiàn)，當(dāng)所有函數(shù)都執(zhí)行成功的時(shí)候執(zhí)行該對(duì)象的resolve方法，反之執(zhí)行該對(duì)象的reject方法
下面是我的具體實(shí)現(xiàn)過(guò)程：
var Promise = function() {
this.doneList = [];
this.failList = [];
this.state = "pending";
};
Promise.prototype = {
constructor: "Promise",
resolve: function() {
this.state = "resolved";
var list = this.doneList;
for(var i = 0, len = list.length; i < len; i++) {
list[0].call(this);
list.shift();
}
},
reject: function() {
this.state = "rejected";
var list = this.failList;
for(var i = 0, len = list.length; i < len; i++){
list[0].call(this);
list.shift();
}
},
done: function(func) {
if(typeof func === "function") {
this.doneList.push(func);
}
return this;
},
fail: function(func) {
if(typeof func === "function") {
this.failList.push(func);
}
return this;
},
then: function(doneFn, failFn) {
this.done(doneFn).fail(failFn);
return this;
},
always: function(fn) {
this.done(fn).fail(fn);
return this;
}
};
function when() {
var p = new Promise();
var success = true;
var len = arguments.length;
for(var i = 0; i < len; i++) {
if(!(arguments[i] instanceof Promise)) {
return false;
}
else {
arguments[i].always(function() {
if(this.state != "resolved"){
success = false;
}
len--;
if(len == 0) {
success ? p.resolve() : p.reject();
}
});
}
}
return p;
}
Improve
目前只是實(shí)現(xiàn)了Promise的基礎(chǔ)功能，但仍然還有無(wú)法處理的情況，例如要實(shí)現(xiàn)3個(gè)或3個(gè)以上的異步請(qǐng)求的串行，目前我的Promise沒(méi)有辦法支持new Promise(A).then(B).then(C)這樣的形式，jQuery在1.7的版本中為Deferred(Promise)對(duì)象實(shí)現(xiàn)了pipe函數(shù)，可以通過(guò)這個(gè)函數(shù)實(shí)現(xiàn)上述功能，代碼為$.Deferred(A).pipe(B).then(C)，我嘗試去讀了jQuery這部分的代碼，但是沒(méi)能讀懂，希望有大神能夠給一些實(shí)現(xiàn)思路
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/85282.html
摘要：事件循環(huán)背景是一門單線程非阻塞的腳本語(yǔ)言，單線程意味著，代碼在執(zhí)行的任何時(shí)候，都只有一個(gè)主線程來(lái)處理所有的任務(wù)。在意識(shí)到該問(wèn)題之際，新特性中的可以讓成為一門多線程語(yǔ)言，但實(shí)際開(kāi)發(fā)中使用存在著諸多限制。這個(gè)地方被稱為執(zhí)行棧。 事件循環(huán)（Event Loop） 背景 JavaScript是一門單線程非阻塞的腳本語(yǔ)言，單線程意味著，JavaScript代碼在執(zhí)行的任何時(shí)候，都只有一個(gè)主線程來(lái)...
摘要：如果有錯(cuò)誤，則到的第二個(gè)回調(diào)函數(shù)中，對(duì)錯(cuò)誤進(jìn)行處理。假設(shè)第一個(gè)的第一個(gè)回調(diào)沒(méi)有返回一個(gè)對(duì)象，那么第二個(gè)的調(diào)用者還是原來(lái)的對(duì)象，只不過(guò)其的值變成了第一個(gè)中第一個(gè)回調(diào)函數(shù)的返回值。 ES6標(biāo)準(zhǔn)出爐之前，一個(gè)幽靈，回調(diào)的幽靈，游蕩在JavaScript世界。 正所謂： 世界本沒(méi)有回調(diào)，寫的人多了，也就有了})})})})})。 Promise的興起，是因?yàn)楫惒椒椒ㄕ{(diào)用中，往往會(huì)出現(xiàn)回調(diào)函數(shù)一...
摘要：在語(yǔ)言中，函數(shù)替換的不是表達(dá)式，而是多參數(shù)函數(shù)，將其替換成一個(gè)只接受回調(diào)函數(shù)作為參數(shù)的單參數(shù)函數(shù)。為什么里面必須使用函數(shù)呢，因?yàn)槲覀冃枰_保傳入的值只有一個(gè)，利用其回調(diào)函數(shù)，來(lái)進(jìn)行遞歸自動(dòng)控制函數(shù)的流程，接收和交還程序的執(zhí)行權(quán) 前言 這篇文章主要是梳理一下自己對(duì)阮一峰大神寫的關(guān)于async/await文章，有寫得不對(duì)的地方以及理解得不對(duì)的地方，各位大佬請(qǐng)指錯(cuò)！ 對(duì)比 簡(jiǎn)單對(duì)比傳統(tǒng)異步，...
摘要：如果沒(méi)有其他異步任務(wù)要處理比如到期的定時(shí)器，會(huì)一直停留在這個(gè)階段，等待請(qǐng)求返回結(jié)果。執(zhí)行的執(zhí)行事件關(guān)閉請(qǐng)求的，例如事件循環(huán)的每一次循環(huán)都需要依次經(jīng)過(guò)上述的階段。因此，才會(huì)早于執(zhí)行。 showImg(https://segmentfault.com/img/bVbnY76); 概念 同步任務(wù)（Synchronous） 在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù) ...
摘要：三即生成器，它是生成器函數(shù)返回的一個(gè)對(duì)象，是中提供的一種異步編程解決方案而生成器函數(shù)有兩個(gè)特征，一是函數(shù)名前帶星號(hào)，二是內(nèi)部執(zhí)行語(yǔ)句前有關(guān)鍵字調(diào)用一個(gè)生成器函數(shù)并不會(huì)馬上執(zhí)行它里面的語(yǔ)句，而是返回一個(gè)這個(gè)生成器的迭代器對(duì)象。 文章來(lái)自微信公眾號(hào)：前端工坊(fe_workshop)，不定期更新有趣、好玩的前端相關(guān)原創(chuàng)技術(shù)文章。 如果喜歡，請(qǐng)關(guān)注公眾號(hào)：前端工坊版權(quán)歸微信公眾號(hào)所有，轉(zhuǎn)載請(qǐng)...
閱讀 2341·2023-04-25 14:29
閱讀 1466·2021-11-22 09:34
閱讀 2709·2021-11-22 09:34
閱讀 3396·2021-11-11 10:59
閱讀 1860·2021-09-26 09:46
閱讀 2231·2021-09-22 16:03
閱讀 1928·2019-08-30 12:56
閱讀 483·2019-08-30 11:12
