检查是否只有一个 Jquery Promises 被实现

Question

Promise.all 返回一个 Promise，当所有作为迭代传递的 Promise 都已实现时，该 Promise 就会实现。考虑到这一点，如何检查是否只有一个承诺得到履行？我有一段代码如下所示：

Promise.all([getPic('blah.jpg'), getPic('blah_two.jpg')]).then(
                function(result) {
                    $('#div').hide();
                }
            ).catch(function(result) {
                $('#div').show();
            })

在这里，我想等待加载任何图像，即 blah.jpg 和 blah_two.jpg。如果其中任何一个被加载，则 $('#div').hide();。但是，我的代码会检查要加载的两个图像，这不是我真正想到的。您能否帮我解决这个问题，并在加载任何图像时隐藏$('#div')。

我认为有一个Promise.any 可以满足我的想法；然而，正如 Mozilla 所说，“这是实验性的，并非所有浏览器都完全支持。”

顺便说一下，下面是我的getPic函数：

function getPic(src, div) {
        return new Promise(function(resolve, reject) {
            $(div).attr('src', src).on("error", function(e) {
                reject( "Cannot access " + src );
            })
                .on("load", function(e) {
                    resolve();
                });
        })
    }

Answer 1

如果您支持现代浏览器，那么您可以使用Promise.race() 方法，在可迭代的promise 中的一个promise 满足或拒绝时返回一个promise，该promise 具有该promise 的值或原因。

Promise.race([getPic('blah.jpg'), getPic('blah_two.jpg')])
  .then(function(result) {
    $('#div').hide();
  }).catch(function(result) {
    $('#div').show();
  })

这是Browser compatibility 图表。仅在 IE 中不支持。

---

只有你使用thisoneSuccess()帮助函数来寻找履行的承诺：

function oneSuccess(promises){
  return Promise.all(promises.map(p => {
    // If a request fails, count that as a resolution so it will keep
    // waiting for other possible successes. If a request succeeds,
    // treat it as a rejection so Promise.all immediately bails out.
    return p.then(
      val => Promise.reject(val),
      err => Promise.resolve(err)
    );
  })).then(
    // If '.all' resolved, we've just got an array of errors.
    errors => Promise.reject(errors),
    // If '.all' rejected, we've got the result we wanted.
    val => Promise.resolve(val)
  );
}

然后传递getPic 图像数组，例如：

oneSuccess([getPic('blah.jpg'), getPic('blah_two.jpg')])
  .then(function(result) {
    $('#div').hide();
  }).catch(function(result) {
    $('#div').show();
  })

演示：

function oneSuccess(promises) {
  return Promise.all(promises.map(p => {
    return p.then(
      val => Promise.reject(val),
      err => Promise.resolve(err)
    );
  })).then(
    errors => Promise.reject(errors),
    val => Promise.resolve(val)
  );
}

// Case 1: First resolved promise
oneSuccess([
  Promise.resolve(1), Promise.reject(2), Promise.resolve(3)
]).then(result => console.log('First Success: ', result))

// Case 2: No resolved promise
oneSuccess([
  Promise.reject(1), Promise.reject(2), Promise.reject(3)
]).catch(error => console.log('All failed: ', error))

Answer 2

您可以使用Promise.race()，这是文档中的一个示例：

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(() => resolve('one'), 500); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(() => resolve('two'), 100); 
});

Promise.race([p1, p2])
.then(function(value) {
  console.log(value); // "two"
  // Both fulfill, but p2 is faster
});