[英]Promise.all not working as expected
我在使用 Promise 編寫異步 function 時遇到問題
function requestsPlot(plot, info) {
return new Promise(function(resolve, reject) {
var plotObject = fieldsObject[plot]
var sqr = new Promise(function(resolve1, reject) {
debugger;
get(createSQRurl(plotObject.polygon))
.then(function(result) {
plotObject.quality = sqrHtmlParsing(result);
resolve1();
});
});
var soilType = new Promise(function(resolve2, reject) {
get(createSoilTypeUrl(plotObject.polygon))
.then(function(result) {
plotObject.soilType = soilTypeHtmlParsing(result);
resolve2();
});
});
var distance = new Promise(function(resolve3, reject) {
var start = turf.centerOfMass(plotObject.polygon).geometry.coordinates;
var end = info.homeCoords;
get('http://router.project-osrm.org/route/v1/driving/' + start + ';' + end + '?overview=false')
.then(function(result) {
var parsed = JSON.parse(result);
if (parsed.code == 'Ok') {
plotObject.distance = parsed.routes[0].distance / 1000;
resolve3()
} else {
plotObject.distance = '';
resolve3()
}
});
});
Promise.all([sqr, soilType, distance]).then(function() {
resolve('test');
})
})
}
這個想法是解決由 requestPlot function 返回的 promise 在 function (變量 sqr、soilType 和距離)內的所有承諾之后。 但是,promise 已解決,而 get function 中的所有請求仍處於待處理狀態。 請注意,“獲取”function 還返回 promise。 非常感謝你的幫助!
PS這里是得到function
function get(url) {
var requestPromise = new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('get', url);
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
}
else {
reject(Error(req.statusText));
}
};
req.onerror = function() {
reject(Error("Network Error"));
};
req.send();
});
return requestPromise
}
在承諾中嵌套承諾是一種眾所周知的反模式 。
您不需要任何這些承諾構造函數,因為您已經get
了返回承諾的get
,您可以直接使用它。
以下是重寫代碼的方法:
function requestsPlot(plot, info) {
const sqr = get(createSQRurl(plotObject.polygon))
.then(sqrHtmlParsing);
const soilType = get(createSoilTypeUrl(plotObject.polygon))
.then(soilTypeHtmlParsing);
const start = turf.centerOfMass(plotObject.polygon).geometry.coordinates;
const end = info.homeCoords;
const distance = get('http://router.project-osrm.org/route/v1/driving/' + start + ';' + end + '?overview=false')
.then(JSON.parse);
return Promise.all([sqr, soilType, distance])
.then(([parsedSqr, parsedSoilType, parsedDistance]) =>
Object.assign(plotObject, {
quality: parsedSqr,
soilType: parsedSoilType,
distance: parsedDistance.code == 'Ok'
? parsed.routes[0].distance / 1000
: ''
}))
}
在具有 async/await 語法的現代 javascript 中,promise.all 語法應如下所示
await promise.all([asyncfuntion1(),asyncfunction2(),...])
不要忘記在 promise 列表中調用您的異步函數 -> asyncfunction1() 而不僅僅是 asyncfuntion1
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.