如何等待几个 HTTP 承诺完成并仅在所有承诺都失败时才显示模式

Question

我在一个页面上有两个 HTTP 调用，它们完全是分开的。

vm.$onInit = function() {
    ....
    ....
    //Get all the items only once during initialization
    ds.getAllItems().then(function(result){
      vm.items = result;
     },function(error){
      vm.errorInApi = true;
    });
    .....
    .....
}
vm.getTimes = function(){
    .....
    .....
    HttpWrapper.send(url,{"operation":'GET'}).then(function(times){
                    .....
}

如果两个 API 都失败了，那么我只需要显示一个模式。

我可以将变量初始化为 true，并且在 API 失败时，我可以将其设为 false，然后仅显示模式。

但是要等多久才能完成所有 API？

Answer 1

嗯...只需反转承诺的极性并使用Promise.all()。

Promise.all() 通常会在所有承诺解决后解决，因此一旦承诺被反转，一旦所有承诺都被拒绝，它就会解决......

var invert = p => new Promise((v, x) => p.then(x, v));

Promise.all([Promise.reject("Error 404"), Promise.reject("Error WTF")].map(invert))
       .then(v => console.log(v));

因此，根据@guest271314 的评论，我在银勺中扩展了解决方案，以展示如何将反转承诺应用于此任务。

var invert = p => new Promise((v, x) => p.then(x, v)),
    prps   = [Promise.reject("Error 404"), Promise.reject("Error WTF")]; // previously rejected promises

myButton.addEventListener('click', function(e){
                                     setTimeout(function(...p){
                                                  p.push(Promise.reject("Error in Click Event Listener"));
                                                  Promise.all(p.map(invert))
                                                         .then(r => results.textContent = r.reduce((r,nr) => r + " - " + nr));
                                                }, 200, ...prps);
                                   });

<button id="myButton">Check</button>
<p id="results"></p>

如果任何承诺（包括先前获得的承诺或事件处理程序中的一次）得到解决，您将不会得到任何输出。

Answer 2

您可以使用Promise.all。

首先你应该得到一个数组中的两个promise。为了实现这一点，如果您的两个函数返回它们创建的承诺，这可能会很有用：

vm.$onInit = function() {
    ....
    ....
    return ds.getAllItems().then(function(result){
      vm.items = result;
     },function(error){
      vm.errorInApi = true;
    });
}
vm.getTimes = function(){
    .....
    .....
    return HttpWrapper.send(url,{"operation":'GET'}).then(function(times){
                    .....
    });
}

然后将根据返回值构建数组：

var arr = [];
arr.push(vm.$onInit());
...
arr.push(vm.getTimes());

你在评论中写道getTimes“在某些按钮点击时被调用”，所以你会在那里进行第二次推送。

或者，也许你看到了另一种方法来将这些承诺放在一个数组中......你如何做并不重要，只要你实现了这一点。

然后（在该单击处理程序中）您需要检测两个承诺都被拒绝的情况。 Promise.all 可以做到，但是你需要翻转 promise 结果：

// Flip promises so that a rejected one is regarded as fulfilled and vice versa:
arr = arr.map(p => p.then(res => { throw res }).catch(err => err));
// Detect that all original promises rejected, i.e. that the new promises all fulfill.
Promise.all(arr).then(function() {
    // execute whatever you need to execute when both ajax calls failed
}).catch(err => err); // ignore

Answer 3

您可以使用async/await 和.catch() 来确定拒绝Promises 的数量，如果数量等于N，则执行操作，其中N 是执行操作所需的拒绝Promise 值的数量。

正如@trincot 所提到的，一个先决条件是从函数中传递return Promise 和传递给.then() 的函数中的值return，以及从@987654332 传递给throw 的Error() @或.then()的第二个参数处的函数见Why is value undefined at .then() chained to Promise?

const N = 2;

function onInit() {
  return Promise.resolve("resolved")
}

function getTimes() {
  return Promise.reject("rejected");
}

const first = onInit();

document.querySelector("button")
.onclick = async function() {
  let n = 0;
  const firstP = await first.catch(() => ++n);
  const secondP = await getTimes().catch(() => ++n);
  if (n === N) {
    // do stuff if `n` is equal to `N`
  } else {
    // do other stuff
    console.log(n, N)
  }
};

<button>click</button>