在javascript的.then（）子句中调用两个Promise

Question

我有一个诺言，当它解决时，它将返回“ ResponseA”，并且在.then（）子句中假设要调用另外两个诺言，当它们实现时，它应该打印出值（tgResponse.length和igResponse.length ）。 但是问题是，它总是打印最后一个promise的值，而跳过第一个console.log（'igResponse'，igResponse.length）;的值。 为什么会这样？ 以及如何确保它并行运行igApiPromise和tgApiPromise并输出它们的值。 非常感谢你的帮助。

这是我的代码：

new Promise((resolve, reject) => {
            /// do some stuff
                    resolve(responseA)
                }
            });
        }).then(ResponseA => {
            console.log(ResponseA.Values);
            igApiPromise(ResponseA.Values.token).then(igResponse => {
                console.log('igResponse', igResponse.length);
            });
            tgApiPromise(ResponseA.Values).then(tgResponse => {
                console.log('tgResponse', tgResponse.length);
            });  
         });

        let igApiPromise = token => {
            return new Promise(function (resolve, reject) {
                console.log('lotfan');
                xhttp.open("GET", "/api/igconfig", true);
                xhttp.setRequestHeader("Authorization", `Bearer ${token}`);
                xhttp.onload = function () {
                    if (this.status >= 200 && this.status < 300 && this.readyState == 4) {
                        resolve(xhttp.response);
                    } else {
                        reject({
                            status: this.status,
                            statusText: xhttp.statusText
                        });
                    }
                };
                xhttp.onerror = function () {
                    reject({
                        status: this.status,
                        statusText: xhttp.statusText
                    });
                };
                xhttp.send();
            });
        }

        let tgApiPromise = token => {
            return new Promise(function (resolve, reject) {
                xhttp.open("GET", "/api/tgApidata", true);
                xhttp.setRequestHeader("Authorization", `Bearer ${token}`);
                xhttp.onload = function () {
                    if (this.status >= 200 && this.status < 300 && this.readyState == 4) {
                        resolve(xhttp.response);
                    } else {
                        reject({
                            status: this.status,
                            statusText: xhttp.statusText
                        });
                    }
                };
                xhttp.onerror = function () {
                    reject({
                        status: this.status,
                        statusText: xhttp.statusText
                    });
                };
                xhttp.send();
            });
        }

Answer 1

使用Promise.all应该看起来像这样：

new Promise((resolve, reject) => {
      resolve(responseA)
    }
  });
}).then(ResponseA => {
  const igPromise = igApiPromise(ResponseA.Values.token)
  const tgPromise = tgApiPromise(ResponseA.Values)
  return Promise.all([igPromise, tgPromise])
}).then(responses => {
  const igResponse = responses[0]
  const tgResponse = responses[1]
  console.log('igResponse', igResponse.length)
  console.log('tgResponse', tgResponse.length)
})

另外，如果将函数igApiPromise和tgApiPromise放在使用位置的下方，则不要进行变量赋值。 使用function语法。

function igApiPromise(token) {
}

我很惊讶您原来的代码没有引发错误。

编辑：那么您的api调用出了点问题。 这个Promise.all准系统示例可以Promise.all工作。 正如预期的那样，它在6秒内都完成了。

 function runProm() { return new Promise((resolve, reject) => { setTimeout(() => resolve('1000'), 2000) }).then(ResponseA => { const igPromise = igApiPromise(ResponseA) const tgPromise = tgApiPromise(ResponseA) return Promise.all([igPromise, tgPromise]) }).then(responses => { const igResponse = responses[0] const tgResponse = responses[1] console.log('igResponse', igResponse) console.log('tgResponse', tgResponse) }) } function igApiPromise(token) { return new Promise((resolve, reject) => { setTimeout(() => resolve('eyegApiPromise' + token), 4000) }) }; function tgApiPromise(token){ return new Promise((resolve, reject) => { setTimeout(() => resolve('teegApiPromise' + token), 40) }) } runProm() 

编辑2：

您xhttp在每个函数中都声明了xhttp ？ 这两个都需要放在里面。

let igApiPromise = token => {
  var xhttp = new XMLHttpRequest()
}

Answer 2

对于Promise.all的使用，安德鲁的回答是完全正确的，您应该使用它。

它始终会打印最后一个承诺的值，而跳过第一个承诺。 为什么会这样？

我想您的实际问题是，您有一个带有单个XMLHttpRequest实例的全局xhttp变量，这两个函数都使用该实例。 它们不能同时并行运行，因为最后一个调用将覆盖以前的调用确实安装的处理程序。

在使用之前，为每个函数调用创建一个新函数。

function …ApiPromise(token) {
    return new Promise(function (resolve, reject) {
         const xhttp = new XMLHttpRequest();
//       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         xhttp.open("GET", …);
         …
    });
}

Answer 3

您可以尝试使用ES7的异步等待功能。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/async_function