国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

異步 JavaScript 與 Promise

livem / 3027人閱讀

摘要:為這些回調函數分別命名并分離存放可以在形式上減少嵌套,使代碼清晰,但仍然不能解決問題。如果在一個結束成功或失敗,同前面的說明后,添加針對成功或失敗的回調,則回調函數會立即執行。

異步?

我在很多地方都看到過異步(Asynchronous)這個詞,但在我還不是很理解這個概念的時候,卻發現自己常常會被當做“已經很清楚”(* ̄? ̄)。

如果你也有類似的情況,沒關系,搜索一下這個詞,就可以得到大致的說明。在這里,我會對JavaScript的異步做一點額外解釋。

看一下這段代碼:

var start = new Date();
setTimeout(function(){
    var end = new Date();
    console.log("Time elapsed: ", end - start, "ms");
}, 500);
while (new Date - start < 1000) {};

這段代碼運行后會得到類似Time elapsed: 1013ms這樣的結果。 setTimeout()所設定的在未來500ms時執行的函數,實際等了比1000ms更多的時間后才執行。

要如何解釋呢?調用setTimeout()時,一個延時事件被排入隊列。然后,繼續執行這之后的代碼,以及更后邊的代碼,直到沒有任何代碼。沒有任何代碼后,JavaScript線程進入空閑,此時JavaScript執行引擎才去翻看隊列,在隊列中找到“應該觸發”的事件,然后調用這個事件的處理器(函數)。處理器執行完成后,又再返回到隊列,然后查看下一個事件。

單線程的JavaScript,就是這樣通過隊列,以事件循環的形式工作的。所以,前面的代碼中,是用while將執行引擎拖在代碼運行期間長達1000ms,而在全部代碼運行完回到隊列前,任何事件都不會觸發。這就是JavaScript的異步機制。

JavaScript的異步難題

JavaScript中的異步操作可能不總是簡單易行的。

Ajax也許是我們用得最多的異步操作。以jQuery為例,發起一個Ajax請求的代碼一般是這樣的:

// Ajax請求示意代碼
$.ajax({
    url: url,
    data: dataObject,
    success: function(){},
    error: function(){}
});

這樣的寫法有什么問題嗎?簡單來說,不夠輕便。為什么一定要在發起請求的地方,就要把successerror這些回調給寫好呢?假如我的回調要做很多很多的事情,是要我想起一件事情就跑回這里添加代碼嗎?

再比如,我們要完成這樣一件事:有4個供Ajax訪問的url地址,需要先Ajax訪問第1個,在第1個訪問完成后,用拿到的返回數據作為參數再訪問第2個,第2個訪問完成后再第3個...以此到4個全部訪問完成。按照這樣的寫法,似乎會變成這樣:

$.ajax({
    url: url1,
    success: function(data){
        $.ajax({
            url: url2,
            data: data,
            success: function(data){
                $.ajax({
                    //...
                });
            }    
        });
    }
})

你一定會覺得這種稱為Pyramid of Doom(金字塔厄運)的代碼看起來很糟糕。習慣了直接附加回調的寫法,就可能會對這種一個傳遞到下一個的異步事件感到無從入手。為這些回調函數分別命名并分離存放可以在形式上減少嵌套,使代碼清晰,但仍然不能解決問題。

另一個常見的難點是,同時發送兩個Ajax請求,然后要在兩個請求都成功返回后再做一件接下來的事,想一想如果只按前面的方式在各自的調用位置去附加回調,這是不是好像也有點難辦?

適于應對這些異步操作,可以讓你寫出更優雅代碼的就是Promise。

Promise上場

Promise是什么呢?先繼續以前面jQuery的Ajax請求示意代碼為例,那段代碼其實可以寫成這個樣子:

var promise = $.ajax({
    url: url,
    data: dataObject
});
promise.done(function(){});
promise.fail(function(){});

這和前面的Ajax請求示意代碼是等效的。可以看到,Promise的加入使得代碼形式發生了變化。Ajax請求就好像變量賦值一樣,被“保存”了起來。這就是封裝,封裝將真正意義上讓異步事件變得容易起來。

封裝是有用的

Promise對象就像是一個封裝好的對異步事件的引用。想要在這個異步事件完成后做點事情?給它附加回調就可以了,不管附加多少個也沒問題!

jQuery的Ajax方法會返回一個Promise對象(這是jQuery1.5重點增加的特性)。如果我有do1()do2()兩個函數要在異步事件成功完成后執行,只需要這樣做:

promise.done(do1);
// Other code here.
promise.done(do2);

這樣可要自由多了,我只要保存這個Promise對象,就在寫代碼的任何時候,給它附加任意數量的回調,而不用管這個異步事件是在哪里發起的。這就是Promise的優勢。

正式的介紹

Promise應對異步操作是如此有用,以至于發展為了CommonJS的一個規范,叫做[Promises/A][]。Promise代表的是某一操作結束后的返回值,它有3種狀態:

肯定(fulfilled或resolved),表明該Promise的操作成功了。

否定(rejected或failed),表明該Promise的操作失敗了。

等待(pending),還沒有得到肯定或者否定的結果,進行中。

此外,還有1種名義上的狀態用來表示Promise的操作已經成功或失敗,也就是肯定和否定狀態的集合,叫做結束(settled)。Promise還具有以下重要的特性:

一個Promise只能從等待狀態轉變為肯定或否定狀態一次,一旦轉變為肯定或否定狀態,就再也不會改變狀態。

如果在一個Promise結束(成功或失敗,同前面的說明)后,添加針對成功或失敗的回調,則回調函數會立即執行。

想想Ajax操作,發起一個請求后,等待著,然后成功收到返回或出現錯誤(失敗)。這是否和Promise相當一致?

進一步解釋Promise的特性還有一個很好的例子:jQuery的$(document).ready(onReady)。其中onReady回調函數會在DOM就緒后執行,但有趣的是,如果在執行到這句代碼之前,DOM就已經就緒了,那么onReady會立即執行,沒有任何延遲(也就是說,是同步的)。

Promise示例 生成Promise

[Promises/A][]里列出了一系列實現了Promise的JavaScript庫,jQuery也在其中。下面是用jQuery生成Promise的代碼:

var deferred = $.Deferred();
deferred.done(function(message){console.log("Done: " + message)});
deferred.resolve("morin");  // Done: morin

jQuery自己特意定義了名為Deferred的類,它實際上就是Promise。$.Deferred()方法會返回一個新生成的Promise實例。一方面,使用deferred.done()deferred.fail()等為它附加回調,另一方面,調用deferred.resolve()deferred.reject()來肯定或否定這個Promise,且可以向回調傳遞任意數據。

合并Promise

還記得我前文說的同時發送2個Ajax請求的難題嗎?繼續以jQuery為例,Promise將可以這樣解決它:

var promise1 = $.ajax(url1),
promise2 = $.ajax(url2),
promiseCombined = $.when(promise1, promise2);
promiseCombined.done(onDone);

$.when()方法可以合并多個Promise得到一個新的Promise,相當于在原多個Promise之間建立了AND(邏輯與)的關系,如果所有組成Promise都已成功,則令合并后的Promise也成功,如果有任意一個組成Promise失敗,則立即令合并后的Promise失敗。

級聯Promise

再繼續我前文的依次執行一系列異步任務的問題。它將用到Promise最為重要的.then()方法(在Promises/A規范中,也是用“有then()方法的對象”來定義Promise的)。代碼如下:

var promise = $.ajax(url1);
promise = promise.then(function(data){
    return $.ajax(url2, data);
});
promise = promise.then(function(data){
    return $.ajax(url3, data);
});
// ...

Promise的.then()方法的完整形式是.then(onDone, onFail, onProgress),這樣看上去,它像是一個一次性就可以把各種回調都附加上去的簡便方法(.done().fail()可以不用了)。沒錯,你的確可以這樣使用,這是等效的。

.then()方法還有它更為有用的功能。如同then這個單詞本身的意義那樣,它用來清晰地指明異步事件的前后關系:“先這個,然后(then)再那個”。這稱為Promise的級聯。

要級聯Promise,需要注意的是,在傳遞給then()的回調函數中,一定要返回你想要的代表下一步任務的Promise(如上面代碼的$.ajax(url2, data))。這樣,前面被賦值的那個變量才會變成新的Promise。而如果then()的回調函數返回的不是Promise,則then()方法會返回最初的那個Promise。

應該會覺得有些難理解?從代碼執行的角度上說,上面這段帶有多個then()的代碼其實還是被JavaScript引擎運行一遍就結束。但它就像是寫好的舞臺劇的劇本一樣,讀過一遍后,JavaScript引擎就會在未來的時刻,依次安排演員按照劇本來演出,而演出都是異步的。then()方法就是讓你能寫出異步劇本的筆。

將Promise用在基于回調函數的API

前文反復用到的$.ajax()方法會返回一個Promise對象,這其實只是jQuery特意提供的福利。實際情況是,大多數JavaScript API,包括Node.js中的原生函數,都基于回調函數,而不是基于Promise。這種情況下使用Promise會需要自行做一些加工。

這個加工其實比較簡單和直接,下面是例子:

var deferred = $.Deferred();
setTimeout(deferred.resolve, 1000);
deferred.done(onDone);

這樣,將Promise的肯定或否定的觸發器,作為API的回調傳入,就變成了Promise的處理模式了。

Promise是怎么實現出來的?

本文寫Promise寫到這里,你發現了全都是基于已有的實現了Promise的庫。那么,如果要自行構筑一個Promise的話呢?

位列于[Promises/A][]的庫列表第一位的[Q][]可以算是最符合Promises/A規范且相當直觀的實現。如果你想了解如何做出一個Promise,可以參考Q提供的[設計模式解析][]。

限于篇幅,本文只介紹Promise的應用。我會在以后多帶帶開一篇文章來詳述Promise的實現細節。

作為JavaScript后續版本的ECMAScript 6將原生提供Promise,如果你想知道它的用法,推薦閱讀[JavaScript Promises: There and back again][]。

結語

Promise這個詞頑強到不適合翻譯,一眼之下都會覺得意義不明。不過,在JavaScript里做比較復雜的異步任務時,它的確可以提供相當多的幫助。

(重新編輯自我的博客,原文地址:http://acgtofe.com/posts/2015...)

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85517.html

相關文章

  • JavaScript 異步

    摘要:從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸 問題描述 在開發過程中,遇到一個需求:在系統初始化時通過http獲取一個第三方服務器端的列表,第三方服務器提供了一個接口,可通過...

    tuniutech 評論0 收藏0
  • javascript異步promise

    摘要:到這里,我已經發出了一個請求買漢堡,啟動了一次交易。但是做漢堡需要時間,我不能馬上得到這個漢堡,收銀員給我一個收據來代替漢堡。到這里,收據就是一個承諾保證我最后能得到漢堡。 同期異步系列文章推薦談一談javascript異步javascript異步中的回調javascript異步之Promise.all()、Promise.race()、Promise.finally()javascr...

    rollback 評論0 收藏0
  • ES6-7

    摘要:的翻譯文檔由的維護很多人說,阮老師已經有一本關于的書了入門,覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中,顯得越來越重要。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書(中文版) 超詳細介紹promise的gitbook,看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評論0 收藏0
  • javascript異步Promise.all()、Promise.race()、Promise.

    摘要:的執行與狀態無關當得到狀態不論成功或失敗后就會執行,原文鏈接參考鏈接對象 同期異步系列文章推薦談一談javascript異步javascript異步中的回調javascript異步與promisejavascript異步之Promise.resolve()、Promise.reject()javascript異步之Promise then和catchjavascript異步之async...

    clasnake 評論0 收藏0
  • JavaScript引擎是如何工作的?從調用棧到Promise你需要知道的一切

    摘要:最受歡迎的引擎是,在和中使用,用于,以及所使用的。怎么處理每個引擎都有一個基本組件,稱為調用棧。也就是說,如果有其他函數等待執行,函數是不能離開調用棧的。每個異步函數在被送入調用棧之前必須通過回調隊列。例如方法是在中傳遞的回調函數。 ? 翻譯:瘋狂的技術宅 原文:www.valentinog.com/blog/engine… 從Call Stack,Global Me...

    zzbo 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<