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

admin管理员组

文章数量:1399013

If I have multiple fetch() calls within a Promise.all block, when one fails, it all fails. That's cool, I need them all to resolve.

However, how can I find which one actually failed?

In the following code, the catch errortells me:

TypeError: Failed to fetch`

which makes it impossible to construct an effective user error message should I choose to do so.

const goodUrl = '.1.3/jquery.min.js';
const badUrl = '.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)

I have looked for duplicates, this is not one as the examples throw the same error

If I have multiple fetch() calls within a Promise.all block, when one fails, it all fails. That's cool, I need them all to resolve.

However, how can I find which one actually failed?

In the following code, the catch errortells me:

TypeError: Failed to fetch`

which makes it impossible to construct an effective user error message should I choose to do so.

const goodUrl = 'https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js';
const badUrl = 'https://ajax.googleapis77./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)

I have looked for duplicates, this is not one as the examples throw the same error

• javascript
• es6-promise
• fetch-api

Share Improve this question Follow asked Nov 11, 2018 at 19:49 StudioTimeStudioTime 24.1k4040 gold badges128128 silver badges215215 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You could just catch each of them individually and throw some custom errors like:

...
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};
    })
])
...

I'd suggest you make your own little wrapper around fetch() that throws a custom error that contains the desired information:

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./ajax/libs/jquery/2.1.3/jquery.min.js';
const badUrl = 'https://ajax.googleapis77./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);
});

Working jsFiddle demo: https://jsfiddle/jfriend00/1q34ah0g/

本文标签： javascriptMultiple fetch() in Promiseallwhich one failedStack Overflow