您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)如何使用Promise解決多個異步Ajax請求導(dǎo)致的代碼嵌套問題,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
問題
前端小同學(xué)在做頁面的時候,犯了個常見的錯誤:把多個Ajax請求順序著寫下來了,而后面的請求,對前面請求的返回結(jié)果,是有依賴的。如下面的代碼所示:
var someData; $.ajax({ url: '/prefix/entity1/action1', type: 'GET' , async: true, contentType: "application/json", success: function (resp) { //do something on response someData.attr1 = resp.attr1; }, error: function (XMLHttpRequest, textStatus, errorThrown) { //在這個頁面里,所有的請求的錯誤都做同樣的處理 if (XMLHttpRequest.status == "401") { window.location.href = '/login.html'; } else { alert(XMLHttpRequest.responseText); } } }); $.ajax({ url: '/prefix/entity2/action2', type: 'POST' , dataType: "json", data: JSON.stringify(someData), async: true, contentType: "application/json", success: function (resp) { //do something on response }, error: function (XMLHttpRequest, textStatus, errorThrown) { //在這個頁面里,所有的請求的錯誤都做同樣的處理 if (XMLHttpRequest.status == "401") { window.location.href = '/login.html'; } else { alert(XMLHttpRequest.responseText); } } });
以上代碼有兩個問題:
*首先就是執(zhí)行順序不能保證,action2很可能在action1返回之前就發(fā)出了,導(dǎo)致someData.attr1這個參數(shù)沒能正確傳出
*其次兩個ajax請求的代碼重復(fù)很嚴重
思路
代碼重復(fù)的問題相對好解決,尤其是在自己的項目里,各種參數(shù)可以通過規(guī)范定死,封裝一個參數(shù)更少的ajax方法就好了
//url:地址 //data:數(shù)據(jù)對象,在函數(shù)內(nèi)部會轉(zhuǎn)化成json串,如果沒傳,表示用GET方法,如果傳了,表示用POST方法 function ajax(url, data, callback) { $.ajax({ url: url, type: data == null ? 'GET' : 'POST', dataType: "json", data: data == null ? '' : JSON.stringify(data), async: true, contentType: "application/json", success: function (resp) { callback(resp); }, error: function (XMLHttpRequest, textStatus, errorThrown) { if (XMLHttpRequest.status == "401") { window.parent.location = '/enterprise/enterprise_login.html'; self.location = '/enterprise/enterprise_login.html'; } else { alert(XMLHttpRequest.responseText); } } }); }
這樣只有url,data和callback三個必要的參數(shù)要填,其他都定死了
執(zhí)行順序的問題,可以把第二個請求放在第一個請求的回調(diào)里,形如:
ajax('/prefix/entity1/action1',null, function(resp){ //do something on response someData.attr1 = resp.attr1; ajax('/prefix/entity2/action2', someData, function(resp){ //do something on response } };
至此問題似乎解決得很完美,但可以想見,如果請求不止兩個,而是4、5個,同時還有其他異步操作(比如我們的頁面里有Vue對象的初始化),相互之間有依賴關(guān)系,光是這樣層層疊疊的括號嵌套,就已經(jīng)讓人頭暈了。
需要找到一種方法,讓異步調(diào)用的表達看起來像同步調(diào)用一樣。
正好最近看了阮一峰老師關(guān)于ES6的書,而且用戶也沒有強硬要求兼容IE瀏覽器,于是就選擇了Promise的方案
解決方案
引入Promise
其實現(xiàn)代瀏覽器都已經(jīng)內(nèi)置支持了Promise,連第三方庫都不需要了,只有IE不行,放棄了
改造ajax封裝函數(shù),在成功的時候調(diào)用resolve(),失敗的時候調(diào)用reject(),并且返回Promise對象
function ajax(url, data, callback) { var p = new Promise(function (resolve, reject) { $.ajax({ url: url, type: data == null ? 'GET' : 'POST', dataType: "json", data: data == null ? '' : JSON.stringify(data), async: true, contentType: "application/json", success: function (resp) { callback(resp); resolve(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { if (XMLHttpRequest.status == "401") { window.parent.location = '/enterprise/enterprise_login.html'; self.location = '/enterprise/enterprise_login.html'; } else { alert(XMLHttpRequest.responseText); } reject(); } }); }); return p; }
修改調(diào)用端
ajax('/prefix/entity1/action1',null, function(resp){ //do something on response someData.attr1 = resp.attr1; }).then( ajax('/prefix/entity2/action2', someData, function(resp){ //do something on response } ).then( initVue() ; ).then( //do something else )
關(guān)于“如何使用Promise解決多個異步Ajax請求導(dǎo)致的代碼嵌套問題”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。