JavaScript異步程式設計2——結合XMLHttpRequest使用Promise

ajax與promise的結合使用。

目錄

1. 概述

2. 詳論

3. 參考

在上一篇文章《javascript異步程式設計1——promise的初步使用》，簡單介紹了一下promise的初步使用。複習一下，promise異步程式設計可以用如下的範式來編寫：

定義一個函數（function a)，這個函數傳回一個promise對象。

promise對象的參數也是一個function b，内部進行了一個異步操作（通常是javascript提供的api）。

function b對象的參數是兩個回調函數resolve和reject。如果函數内部進行的異步操作成功，回調resolve；否則回調reject。

調用function a，傳回一個promise對象，這樣異步操作就啟動了。

調用promise對象的then方法，參數是resolve和reject的真正響應函數。當異步操作完成了，就會執行相應分支的響應函數。

采用以上範式，可以通過promise來進行ajax操作，也就是xmlhttprequest，畢竟這個操作在web應用中實在太常見了。

首先仍然是準備一個html頁面：

如果不使用promise，那麼相應的javascript代碼為：

可以看到這裡仍然是通過事件機制來實作異步行為。接下來采用前面提到的程式設計範式将其改造成promise機制：

改造成promise的過程與上一章并沒有什麼不同，隻不過函數内部調用xmlhttprequest的流程更加複雜些。這兩個例子都是将事件改造成promise，那不是意味着對于異步程式設計而言，promise要優于事件呢？

不能完全這麼肯定，但是可以确定的是事件并不總是異步程式設計的最優實踐。一個很顯然的問題就是：事件很适合處理在同一對象上多次發生的事情，但是事件偵聽器的響應函數可能并不是我們想要的——更多情況下，我們隻想要直到兩個狀态，當異步操作完成的時候該做什麼，當異步操作失敗的時候又該做什麼，而這正是promise擅長處理的。

例如這裡的xmlhttprequest操作，事件響應函數onload中的所有行為，并不都是異步請求成功時需要完成的，隻有檢測通路請求狀态為200時候，才需要進行請求成功時的回調函數。使用promise，可以更準确的進行異步行為。

ajax原理-原生js的xmlhttprequest對象意義

javascript異步程式設計的4種方法