Promise.allは

Question

私が午前トラブル約束

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'); 
    }) 
    }) 
} 

アイデアは、関数内のすべての約束（変数SQR、soilType後requestPlot関数が返す約束を解決することですを使用して非同期関数を書くの期待通りに動作しませんおよび距離）が解決されます。しかし、get関数のすべての要求がまだ保留されている間は、約束は解決されます。 「get」関数も約束を返すことに注意してください。 ご協力いただきありがとうございます！

P.S.ここには関数があります。

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 
} 

Answer 1

約束の中の誓約はwell-known anti-patternです。

約束を返す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 
      : '' 
     })) 
}