天天看點

《AngularJS進階程式設計》——5.9 使用承諾

本節書摘來自異步社群《angularjs進階程式設計》一書中的第5章,第5.9節,作者:【美】adam freeman(弗裡曼)著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

承諾是一種表述方式,它表明某項工作會以異步方式執行并在未來某個點被完成。最常遇到的方式是産生ajax請求,當請求被完成時,浏覽器會暗地裡發出http請求通知你的應用程式。在清單5-42中,我建立了産生ajax請求的袖珍angularjs應用程式。

注意:

該示例依賴于我在章節伊始建立的todo.json檔案。

清單5-42 在檔案jsdemo.html中建立袖珍angularjs應用程式

《AngularJS進階程式設計》——5.9 使用承諾

我在該清單中所使用的angularjs特性是在第2章中所熟知的。我建立了angularjs子產品并給了它控制器democtrl。控制器使用$scope對象為視圖提供資料,該視圖有使用資料綁定和ng-repeat指令的表格。你可以在圖5-3中看到浏覽器是如何顯示該示例的。

《AngularJS進階程式設計》——5.9 使用承諾

javascript及異步程式設計

如果你是從像c#或java語言來到javascript的,你可能會驚訝于缺失控制異步代碼執行的關鍵字,諸如lock或synchronized之類的。javascript不支援這種流控制或提供對設定優先級的支援。這緻使了更簡單的開發者體驗,即使它很容易不小心産生副作用。我将在第20章中講angularjs對建立自定義承諾的支援時回到這一話題。

子產品、控制器和視圖就是全部我向你展示承諾如何工作所需設定的設施了。清單的重要部分在這:

《AngularJS進階程式設計》——5.9 使用承諾

$http服務(我在第20章講它)用于産生ajax請求,然後get方法取到你想從伺服器擷取的檔案的url。(僅通過指定檔案名,我就能告訴浏覽器我想要的檔案在目前所顯示的html文檔旁邊的哪裡。)

ajax請求是被異步執行的,當請求發出時,浏覽器繼續運作我的簡單應用程式。$http.get方法傳回承諾對象,我可以用它接收關于ajax請求的通知。在本例中,我使用success方法注冊了将在請求完成後被調用的回調函數。該回調函數接收從伺服器拿到的資料,我使用它把屬性指派給$scope,接着依次給出ng-repeat指令的内容填充to-do項的表格。success方法是承諾對象所定義的三個中的一個,如表5-7所示。

表5-7 承諾對象定義的方法

《AngularJS進階程式設計》——5.9 使用承諾

三個方法都用函數作為參數,并根據承諾的結果而調用。回調函數success會被傳入從伺服器拿到的資料,而回調函數error接收遭遇到問題的詳情。

提示:

另一個方式是考慮承諾所定義的方法是類似于事件的。在這種方式中在使用者單擊按鈕并觸發事件時回調函數會被調用,承諾将在工作被完成時調用回調函數。

三個承諾方法都傳回承諾對象,讓異步任務可以按順序連結在一起。清單5-43包含簡單示例。

清單5-43 在檔案jsdemo.html中連結承諾

《AngularJS進階程式設計》——5.9 使用承諾

這裡我使用了then方法兩次,第一次是處理調用$http.get方法的響應,并再次注冊稍後将被調用的函數。這種類型的代碼很難讀,是以我會使用依序高亮顯示。第一,我調用get方法建立ajax請求:

《AngularJS進階程式設計》——5.9 使用承諾

我使用then方法提供函數,它在ajax請求完成時将被調用。第一個在請求成功時調用,而第二個在請求失敗時:

《AngularJS進階程式設計》——5.9 使用承諾

承諾保證那些函數中的一個将被調用,但不是直到ajax請求被完成或失敗才調用。我使用then方法再次添加了額外的函數:

《AngularJS進階程式設計》——5.9 使用承諾

這一次我僅僅為then方法傳入一個函數,意味着如果有問題我也不想要通知。這最後的函數不顧之前被調用過的函數,向資料模型添加了一項。你可以在圖5-4中看到ajax請求成功的效果。

《AngularJS進階程式設計》——5.9 使用承諾

如果暫時連結的不太好也不用擔心。當你開始在你自己的項目中使用承諾時你将很快有主意,你會在第20章中(在我講angularjs對ajax的支援時)以及第21章中(在我講restful的web服務時)看到更多的承諾示例。