Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

axios.all spread and catch all

I'm using .all method of popular library 'axios' for handling my ajax requests.

But how can I handle errors in case all requests got 404?

for example:

axios.all([
        axios.get('http://some_url'),
        axios.get('http://another_url'),
      ])
        .then(axios.spread((someUrl, anotherUrl) => {
         // ... boring stuff goes there
        }))
        .catch(() => {
         //... error goes there
        });

enter image description here

So, seems only one error has ben "catched".

How can I catch them all? Or maybe there any kinda .finally?

like image 631
WebArtisan Avatar asked Feb 08 '18 08:02

WebArtisan


People also ask

Is Axios all deprecated?

As of July 15, 2020, Axios updated its GitHub README file to reflect that the axios. all helper method has been deprecated and should be replaced with Promise. all .

How do I create multiple Axios calls?

Since axios returns a Promise we can go for multiple requests by using Promise. all , luckily axios itself also ships with a function called all , so let us use that instead and add two more requests. Again we define the different URLs we want to access. const requestOne = axios.

What is Axios error?

Axios errors are verbose when stringified and leak URL and header authorization. This library trims them down to essential information removing circular references. It redacts URL and header authorization. It can optionally be configured to redact any of request, response, and query string data.

What's Axios?

Axios (stylized as ΛXIOS) is an American news website based in Arlington County, Virginia. It was founded in 2016 and launched the following year by former Politico journalists Jim VandeHei, Mike Allen and Roy Schwartz.


2 Answers

The problem (as you already know) is that you will get into catch block as soon as the first promise rejects, making it impossible to collect all failed responses in the same catch. However, you still can handle failed promises manually to aggregate errors and throw afterwards.

Check it this will work for you:

const promises = [
  axios.get('http://some_url'),
  axios.get('http://another_url'),
]
const promisesResolved = promises.map(promise => promise.catch(error => ({ error })))

function checkFailed (then) {
  return function (responses) {
    const someFailed = responses.some(response => response.error)

    if (someFailed) {
      throw responses
    }

    return then(responses)
  }
}

axios.all(promisesResolved)
  .then(checkFailed(([someUrl, anotherUrl]) => {
    console.log('SUCCESS', someUrl, anotherUrl)
  }))
  .catch((err) => {
    console.log('FAIL', err)
  });

You will get into catch block if at least one of the promises fails. You can find one which one by checking err array of responses.

like image 78
dfsq Avatar answered Sep 20 '22 11:09

dfsq


I don't think this is possible due to the fail fast behaviour of Promise.all. If any of your requests fail, they will automatically be the culprit and the result in the catch.

    Promise.all([
      Promise.reject(Error('1')),
      Promise.reject(Error('2')),
      Promise.reject(Error('3'))
    ]).then((results) => {
      console.log(results)
    }, (error) => {
      console.log(error.message)
    })

This resulting code will always print 1 as it is the first to fail.I think a similar feature was requested on the repo and they said it wasn't possible.

I was going to leave this as a comment but don't have a high enough reputation yet.

like image 25
Charlie Avatar answered Sep 18 '22 11:09

Charlie