一、利用Promise的知識，對最開始的ajax的例子進行一個簡單的封裝：

var url = 'xxx'; // 封裝一個get請求的方法 function request(url){return new Promise(function(resolve,reject){var XHR = new XMLHttpRequest();XHR.open('GET',url,true);XHR.send();XHR.onreadystatechange = function(){if(XHR.readyState==4 && XHR.status == 200){try{var response = JSON.parse(XHR.responseText);resolve(response)} catch(e){reject(e);}}else{reject(new Error(XHR.statusText))}}})}request(url).then(function(res){console.log(res); })

?二、當有一個ajax請求，它的參數需要另外2個甚至更多請求都有返回結果之后才能確定，這個時候，就需要用到Promise.all

Promise.all接收一個Promise對象組成的數組作為參數，當這個數組所有的Promise對象狀態都變成resolved或者rejected的時候，它才會去調用then方法。

url1 = "xxx1" url2 = "xxx2"function renderAll(){return Promise.all([request(url1),request(url2)]) }renderAll().then(function(value){console.log(value); })

?三、Promise.race

Promise.race是以一個Promise對象組成的數組作為參數，不同的是，只要當數組中的其中一個Promsie狀態變成resolved或者rejected時，就可以調用.then方法了

function renderRace() {return Promise.race([getJSON(url), getJSON(url1)]); }renderRace().then(function(value) {console.log(value); })

?歡迎加入大前端交流群！群號：277942610，新建立VIP新群

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Promise实战AJAX封装的全部內容，希望文章能夠幫你解決所遇到的問題。

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