首頁猿問多次請求因?yàn)榫W(wǎng)絡(luò)無法保證響應(yīng)順序，...

多次請求因?yàn)榫W(wǎng)絡(luò)無法保證響應(yīng)順序，如何保證獲得所有響應(yīng)結(jié)果后生成的列表結(jié)果的順序與請求順序一致？

JavaScript

有只小跳蛙 2019-02-25 13:12:56

看很多人都誤會成了一次性發(fā)送10次，補(bǔ)充為這樣：假如用戶可以連續(xù)點(diǎn)擊按鈕，每次發(fā)1次請求，每次獲得響應(yīng)結(jié)果后會生成一個li，因?yàn)榫W(wǎng)絡(luò)狀態(tài)的影響后發(fā)出的請求可能先響應(yīng)，假如點(diǎn)了10次，如何保證10個li的順序與請求的順序一致！使用Promise.all的答案肯定都是不對的，因?yàn)槟銦o法預(yù)測用戶點(diǎn)擊按鈕的時機(jī)，用戶可能一兩秒完成10次點(diǎn)擊，但也可能在10秒內(nèi)完成......肯定不能說我等用戶點(diǎn)完10次再使用Promise.all請求，何況實(shí)際情況不一定是10次。這是我一次面試唯一沒答的很好的題目，所以印象比較深刻，我開始也答的Promise.all，被直接否定，后面我提到在請求報文中攜帶相關(guān)參數(shù)，響應(yīng)中返回，本地做mapping關(guān)系來實(shí)現(xiàn)，但面試官依然不是很滿意。后面經(jīng)我詢問后面試官只提到了思路，說了幾個詞記得不是很清楚，后續(xù)查資料猜測貌似是在請求響應(yīng)包含一個Request-Id字段，并使用 UUID 作為該值......沒實(shí)踐過不敢確定！

查看完整描述

10 回答

眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個贊

Promise.all可以保證順序但是得等到所有請求完畢才會觸發(fā)

function p1(time) {

return new Promise(function (resolve, reject) {

setTimeout(function () {

resolve(time);

}, time);

})

}

Promise.all([p1(5000), p1(1000)]).then(function (res) {

console.log(res);//[5000,1000]

});

反對回復(fù) 2019-03-26

郎朗坤

TA貢獻(xiàn)1921條經(jīng)驗(yàn) 獲得超9個贊

在請求的時候帶過去要顯示的li的順序；然后響應(yīng)回來順序；按順序排列吧

反對回復(fù) 2019-03-26

30秒到達(dá)戰(zhàn)場

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個贊

一，可以把請求回來的數(shù)據(jù)做一個標(biāo)識，然后把所有數(shù)據(jù) 都放到一個數(shù)組中，按標(biāo)識排序。
二，使用Promise.all，接收的是一個數(shù)組，等到數(shù)組中的請求全部完成，就執(zhí)行Promise.all().then(values => {})，其中values就是一個數(shù)組，且排好序的

反對回復(fù) 2019-03-26

搖曳的薔薇

TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個贊

萬無一失的方法是：
從第一個開始執(zhí)行，等第一個執(zhí)行結(jié)束后，再執(zhí)行第二個，依次類推。
這種同步方法效率太低。
那么可以考慮Promise.all呢？
擔(dān)心promise.all中的所有task都是異步執(zhí)行的？
那么真正返回結(jié)果是依task列表順序返回，所以就它了。

反對回復(fù) 2019-03-26

jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個贊

以下代碼實(shí)現(xiàn)了：

并發(fā)請求
順序操作
不需要等待全部請求完畢
可以直接運(yùn)行

(()=>{

Promise.allInOrder = (promises, thenForEach)=>{

let sequence = Promise.resolve();

promises.forEach(function(request){

sequence = sequence.then(function(){

return request.then(thenForEach);

});

};

})();

// test

(()=>{

let timeConsumingFunc = param=>new Promise(

(resolve)=>{

let timeout = Math.random() * 5000;

console.log(`task ${param} will be resolved in ${timeout}ms`);

setTimeout(()=>{

console.log(`${param} resolved`);

resolve(param+10);

}, timeout);

}

);

Promise

.allInOrder(

[timeConsumingFunc(1), timeConsumingFunc(2), timeConsumingFunc(3)],

d=>{

return new Promise(function(resolve) {

console.log(d);

resolve();

});

}

)

})();

這是我以前的一個提問的最終解決方法，也可以采用我采納的哪個答案，只是代碼會臃腫一些

補(bǔ)充：
針對你說的情況，可以間隔1s內(nèi)的鼠標(biāo)點(diǎn)擊作為一組請求用上面方法并發(fā)請求，間隔大于1s的同步繼發(fā)操作

反對回復(fù) 2019-03-26

慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個贊

在請求里帶一個時間戳參數(shù)，然后再原封不動把這個時間戳返回來，并根據(jù)時間進(jìn)行排序。

反對回復(fù) 2019-03-26

慕少森

TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個贊

其實(shí)如果后天和前臺能夠聯(lián)動，最好是請求時有一個標(biāo)號，然后返回時帶標(biāo)號，這樣肯定沒有問題，且無論多少返回都可以先展示，后期再依序調(diào)整。
其實(shí)如果更友好的，發(fā)一次請求，就在數(shù)組中填一個展位符信息，接收到一個就更新數(shù)組，并刷新展示。

反對回復(fù) 2019-03-26

當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個贊

我的話可能會這么做:

function Ajax (option) {

this.list = []

let ajax = (data) => {

let i = arr.length

this.list[i] = '等待結(jié)果'

$.ajax(option.url, {

data:data

// ...

success: (res) => {

this.list[i] = res

option.success(res, i)

}

})

}

return ajax

}

let userAjax = new Ajax({url:xxx,method:xxx})

每次請求，直接userAjax(data)，然后請求結(jié)果的順序在list上固定好的，怎么響應(yīng)影響不了

然后看你說響應(yīng)里加字段，那就是后端控制了，你只需要對id進(jìn)行排序，不過感覺跟你前面說的攜帶相關(guān)參數(shù)，響應(yīng)中返回，本地做mapping關(guān)系來實(shí)現(xiàn)沒什么區(qū)別啊，只不過一個前端生成uuid，一個后端生成uuid。

反對回復(fù) 2019-03-26

10 回答
0 關(guān)注
1106 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

多次請求因?yàn)榫W(wǎng)絡(luò)無法保證響應(yīng)順序，如何保證獲得所有響應(yīng)結(jié)果后生成的列表結(jié)果的順序與請求順序一致？

多次請求因?yàn)榫W(wǎng)絡(luò)無法保證響應(yīng)順序，如何保證獲得所有響應(yīng)結(jié)果后生成的列表結(jié)果的順序與請求順序一致？

10 回答

添加回答

多次請求因?yàn)榫W(wǎng)絡(luò)無法保證響應(yīng)順序，如何保證獲得所有響應(yīng)結(jié)果后生成的列表結(jié)果的順序與請求順序一致？

多次請求因?yàn)榫W(wǎng)絡(luò)無法保證響應(yīng)順序，如何保證獲得所有響應(yīng)結(jié)果后生成的列表結(jié)果的順序與請求順序一致？