Promise.all不按预期工作

Question

我在使用 Promises 编写异步函数时遇到了问题。

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函数中所有promise（即变量sqr，soilType和distance）都解决后再解决返回的promise。但是，当get函数中的所有请求仍处于挂起状态时，该promise就被解决了。请注意，“get”函数也会返回一个promise。

非常感谢您的帮助！

附：以下是get函数。

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
}

- Christoph Pahmeyer

Answer 1

将Promise嵌套在Promise中是一个众所周知的反模式。

你不需要任何Promise构造函数，因为你已经有了返回Promise的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
          : ''
      }))
}

- nem035

---

谢谢你的回答，它真的帮助我避免看这段代码... - smnbbrv

哇，非常感谢您的超快回答，以及提供有关反模式的链接！ - Christoph Pahmeyer

@ChristophPahmeyer 没问题，伙计，很高兴能帮助你。 - nem035

Answer 2

在现代的JavaScript中，使用async/await语法，promise.all语法应该如下所示：

await promise.all([asyncfuntion1(),asyncfunction2(),...])

不要忘记在承诺列表中调用您的异步函数 -> asyncfunction1()，而不仅仅是asyncfuntion1。

- yahya benzha