首先回顧一下Ajax請求的步驟

var client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send();// 注:onreadystatechange,是Ajax請求狀態(readyStatus)改變時執行的函數.. // 使用GET方法獲取給定url下的json格式,

再回顧一下工廠模式:

function createPerson(name, age, job) {var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function() {alert(this.name);};return o; } var person1 = createPerson("Nicholas", 29 ,"Software Engineer"); var person2 = createPerson("Greg", 27, "Doctor"); // 注: 用函數來封裝了創建對象的具體細節,再創建實例時,可以直接使用createPerson + 參數的形式

下面是用Promise封裝該請求,并提供一個友好接口的例子:

var getJSON = function(url) {var promise = new Promise(function(resolve, reject) {var client = new XMLHttpRequest();client.open("GET", url);client.onreadystatechange = handler;client.responseType = "json";client.setRequesHeader("Accept", "application/json");client.send();function handler() {if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.statusText));}};});return promise; };// 調用getJSON getJSON("/posts.json").then(function(json) {console.log('Contents: ' + json); }, function(error) {console.error('出錯了', error); });// 注: 用工廠模式,在getJSON函數里面首先創建了一個Promise實例,然后利用創建Ajax請求，最后返回該實例.調用時直接使用getJSON // (url)即可 // promise實例中的resolve和 reject方法,來自于調用時候的 .then里面的2個參數,第一個參數對應resolve,第二個參數對應reject

參考《ES6標準入門》(第3版)P276
參考《JavaScript高級程序設計》(第3版) P144

總結

以上是生活随笔為你收集整理的es6 --- 用promise对象实现Ajax操作的一个实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。