快速入門：使用承諾（使用 Ja…

http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/hh700339.aspx

你可以通過異步執行某些種類的處理來使 UI 更具響應性，從而使應用的 UI 線程自由響應用戶輸入。本快速入門展示如何在 Windows 應用商店應用中執行異步編程。

適用於 JavaScript 的 Windows 庫中和 Windows 運行時中的異步 API 在 JavaScript 中以承諾形式表示，承諾是在常見 JS Promises/A 提議中定義的。你可以在 JavaScript 中的異步編程中找到有關異步編程和承諾的詳細信息。

當你使用承諾時，你可以添加一些錯誤處理使你的代碼更加可靠。本快速入門僅顯示可用於處理錯誤的多種方法之一，但是你可以在如何使用 JavaScript 中的承諾處理錯誤中瞭解更多內容。

先決條件

要完成本快速入門，你需要能夠創建一個使用 Windows JavaScript 庫的基本 Windows 應用商店應用。有關創建第一個應用的幫助，請參閱創建第一個採用 JavaScript 的 Windows 應用商店應用。

說明

1. 使用返回承諾的函數

讓我們看一個簡單的承諾示例。 我們將創建一個應用，該應用使用一個 URL 並嘗試與該站點聯繫，然後報告聯繫是否成功。

1. 創建一個名爲 TestPromise 的空白 Windows 應用商店應用。

2. 添加一個 INPUT 元素。

   HTML

   
   <</span>div>
   <</span>input id="inUrl" />
   </</span>div>
   
   
   

3. 添加一個顯示該 URL 的結果的 DIV 元素。

   HTML

   
   <</span>div id="divResult">Result</</span>div>
   
   
   

4. 爲 INPUT 元素添加一個更改處理程序。可以作爲 WinJS.Utilities.ready 函數的一部分執行此操作。它在 DOMContentLoaded 事件之後被立即調用，而該事件在解析頁面之後，但在加載所有資源之前觸發。

   JavaScript

   
   WinJS.Utilities.ready(function () { 

   
    var input = document.getElementByIdx_x("inUrl");
       input.addEventListener("change", changeHandler); 

   
    }, false);
   
   

5. 在更改處理程序中調用 xhr，同時向其傳遞用戶輸入的 URL，並使用結果更新結果 DIV。xhr 函數返回 Promise，因此我們可以使用承諾的 then 或 done 函數來更新 UI。只要 xhr 函數成功發出 XmlHttpRequest 或已獲取錯誤，就會執行 then 方法。done 函數相同，但保證其引發該函數內未處理的任何錯誤除外。

   你最多可以向 then 或 done 提供三個參數：一個是在承諾得到履行且沒有錯誤後處理該承諾的completed 函數；一個是處理錯誤的 error 函數；一個是顯示承諾完成進度的 progress 函數。現在，我們將僅說明如何添加 completed 函數，並且爲另外的步驟保存錯誤處理。completed 函數將 result DIV 的背景色設爲綠色，並且將文本設置爲“Success”。

   JavaScript

   
   function changeHandler(e) { 

   
    var input = e.target; 

   
    var resDiv = document.getElementByIdx_x("divResult"); 

   
    WinJS.xhr(
   

   
        { url: e.target.value }).then(
   

   
         function completed(result) { 

   
              if (result.status === 200) { 

   
               resDiv.style.backgroundColor = "lightGreen"; 

   
               resDiv.innerText = "Success"; 

   
    } 

   
    }); 

   
    }
   

6. 生成並調試該應用，然後輸入一個 URL。（當你輸入 URL 後，你可能需要在 INPUT 控件外單擊，以便更改事件出現。）如果 URL 有效，則 result DIV 應該變爲綠色並顯示“Success”。如果輸入的 URL 無效，則不會發生任何事情。

2. 處理錯誤

1. 要進行錯誤處理，請在 then 函數內部添加一個 error 函數，以便將 Success 按鈕的背景色設置爲紅色，並且將文本設置爲錯誤消息（如果有）。

   JavaScript

   
   function changeHandler(e) { 

   
    var input = e.target; 

   
    var resDiv = document.getElementByIdx_x("divResult"); 

   
    WinJS.xhr({url: e.target.value}).then( 

   
    function fulfilled (result) { 

   
    if (result.status === 200) { 
   

   
    resDiv.style.backgroundColor = "lightGreen"; 
   

   
    resDiv.innerText = "Success"; 
   

   
    } 
   

   
    }, 
   

   
   function error(e) { 
   

   
    resDiv.style.backgroundColor = "red"; 
   

   
   if (e.message != undefined) {  // If the URL is really malformed or blank.
               resDiv.innerText = e.message; 
   

   
    }
               else if (e.statusText != undefined) { // If an XmlHttpRequest is made.
                   resDiv.innerText = e.statusText;
               } 
   

   
   else { 
   

   
    resDiv.innerText = "Error"; 
   

   
    } 
   

   
    }); 
   

   
   }
   

2. 生成並調試該應用。如果輸入的 URL 無效，按鈕將變爲紅色並顯示錯誤消息。

摘要 和 next steps

在本快速入門中，你瞭解瞭如何使用返回承諾的函數以及如何執行一種錯誤處理。

下面的主題就更復雜的承諾方案進行了說明：

 

• 如何使用 JavaScript 中的承諾處理錯誤
• 鏈接 JavaScript 中的承諾

相關主題

使用 JavaScript 異步編程