Promise.all 中的多个 fetch() - 哪个失败了？

Question

如果我在一个 Promise.all 块中有多个 fetch() 调用，当一个失败时，所有调用都会失败。太棒了，我需要他们全部解决。

但是，我怎样才能找到实际失败的那一个？

在下面的代码中，catch error告诉我：

TypeError: Failed to fetch`

如果我选择这样做，就不可能构建有效的用户错误消息。

const goodUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
const badUrl = 'https://ajax.googleapis77.com/ajax/libs/jquery/2.1.3/jquery.min.js';
Promise.all([
    fetch(goodUrl),
    fetch(badUrl), /* will fail */
    fetch(goodUrl)
]).then(([response1, response2, response3]) => {
    console.log(response1);
    console.log(response2);
    console.log(response3);
}).catch((err) => {
    console.log(err);
});

Here's a fiddle (a snippet didn't play nice)

我查找了重复项，this is not one as the examples throw the same error

Answer 1

您可以单独捕获它们中的每一个，然后 throw 一些自定义错误，例如：

...
Promise.all([
    fetch(goodUrl).catch(err => {
        throw {url: goodUrl, err};
    }),
    fetch(badUrl).catch(err => {
       throw {url: badUrl, err};
    }),
    fetch(goodUrl).catch(err => {
       throw {url: goodUrl, err};
    })
])
...

Answer 2

我建议您围绕 fetch() 制作自己的小包装器，它会抛出包含所需信息的自定义错误：

function myFetch(url) {
    return fetch(url).catch(function(err) {
       let myError = new Error("Fetch operation failed on " + url);
       myError.url = url;
       throw myError;
    });
}

const goodUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
const badUrl = 'https://ajax.googleapis77.com/ajax/libs/jquery/2.1.3/jquery.min.js';
Promise.all([
    myFetch(goodUrl),
    myFetch(badUrl), /* will fail */
    myFetch(goodUrl)
]).then(([response1, response2, response3]) => {
    console.log(response1);
    console.log(response2);
    console.log(response3);
}).catch((err) => {
    console.log(err);
});

工作 jsFiddle 演示：https://jsfiddle.net/jfriend00/1q34ah0g/

Promise.all 中的多个 fetch() - 哪个失败了？

Multiple fetch() in Promise.all - which one failed?

javascript

es6-promise

fetch-api