How to skip a promise that doesn't work?

Question

async function getData() {
  const getProject = await axios.get('url', {
    auth: {
      username: 'username',
      password: 'pw'
    }
  });

  const projects = getProject.data.value;
  const promises = projects.map(project =>
    axios.get(`url`, {
      auth: {
        username: 'username',
        password: 'pw'
      }
    })
  );

  const results = await axios.all(promises)

  const KPIs = results.map(v => v.data.value);
}

What I am trying to do is:

get an axios call to fetch the name of the projects.
Use those fetched names to call multiple axios calls. This is supposed to give me some data from that project.

When I do the second axios call, there are some API calls that won't work because the data does not exist in that project. This was intended. But it will break by giving me the 404 error and won't reach the line const results = await axios.all(promises).

I want it to skip that whenever it doesn't exist and only call it from the one that exists and store the fetched data into KPIs. How can I do that?

EDIT

The first axios call returns an array of objects

ex) {id: "id...", name: "Javelin", url: " .visualstudio.com/_apis/projects/6a93eab2-4996-4d02-8a14-767f02d94993", state: "wellFormed", revision: 99, …}

Something like that. So, I literally just get the .name of this object and put it into my url like:

axios.get({id}.extmgmt.visualstudio.com/_apis/ExtensionManagement/InstalledExtensions/{id}/..../${project.name}_test/Documents

You could wrap your `axios.get` call in another promise that doesn't get rejected when the `axios.get` gets rejected. — Ryan Searle, Aug 24 '18 at 15:58
Apart from that possible solution, can't you edit what the first fetch returns(in the backend)? Seems to me the first call should return all actual available endpoints and not just the project name, otherwise you keep on fetching pointless 404's. — René, Aug 24 '18 at 16:03
@RyanSearle That's the way I thought of too, so I doubt there's an obvious better one. — wizzwizz4, Aug 24 '18 at 16:05

score 2 · Accepted Answer · answered Aug 24 '18 at 16:07

2

This wraps the call in a promise that won't fail.

You also need to consider than you probably want to filter out null responses.

async function getData() {
    const getProject = await axios.get('url', {
        auth: {
            username: 'username',
            password: 'pw'
        }
    });

    const projects = getProject.data.value;
    const promises = projects.map(fallible);

    const results = await axios.all(promises)

    const KPIs = results.filter(v => v).map(v => v.data.value);
}

function fallibleCall(project) {
    return new Promise((resolve, reject) => {
        axios.get(`url`, {
            auth: {
                username: 'username',
                password: 'pw'
            }
        }).then(resolve).catch(resolve);
    })
}

answered Aug 24 '18 at 16:07

Ryan Searle

1,597
1
19
30

I'm glad to hear it! – Ryan Searle Aug 24 '18 at 16:12
`new Promise` is not needed, see [What is the explicit promise construction antipattern and how do I avoid it?](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) – str Aug 24 '18 at 16:13
@str Yeah I don't usually create `Promise`s like this since returning a value in the `then` method returns a new promise but if you're trying to handle a catch situation it's not the worst thing in the world. – Ryan Searle Aug 24 '18 at 16:15
@str The issue I see with the other examples is that they return a promise that's in a pending state which doesn't seem logical and could cause issues in another implementation. – Ryan Searle Aug 24 '18 at 16:24
@RyanSearle Well, it is useless. Your code returns `return new Promise` which is also a Promise in the pending state. That is what Promises are meant to do. – str Aug 24 '18 at 16:30
It's not a promise in a pending state because I resolved it. – Ryan Searle Aug 24 '18 at 16:32
@str Have a look at this: `let prom = new Promise((res,rej)=> { rej(); }); let prom2 = prom.catch(()=> null); let prom3 = new Promise((res,rej)=> { res(); }); console.log(prom); console.log(prom2); console.log(prom3);` – Ryan Searle Aug 24 '18 at 16:38
@RyanSearle It is instantly resolved when you do `new Promise((res,rej)=> { res(); })` but not in the code of your answer. But why does that even matter? A promise might be resolved or not. You have to handle both cases and there is nothing that "could cause issues" when you handle it properly. – str Aug 24 '18 at 17:24

score 1 · Answer 2 · answered Aug 24 '18 at 16:07

1

If the problem is with fetching project data you just need to handle errors that occur there, one way is to simply catch the error and return null instead.

const promises = projects.map(project =>
    axios.get(`url`, {
      auth: {
        username: 'username',
        password: 'pw'
      }
    }).catch(err => {
        return null;
    })
  );

answered Aug 24 '18 at 16:07

Jake Holzinger

5,783
2
19
33

This gives me `Unhandled Rejection (TypeError): Cannot read property 'data' of null` on the line `const KPIs = results.map(v => v.data.value);` – Dawn17 Aug 24 '18 at 16:08
`results.filter(value => value !== null).map(v => v.data.value)` – Jake Holzinger Aug 24 '18 at 16:09
Thanks this also worked out. But sorry I that accepted the other one. – Dawn17 Aug 24 '18 at 16:11

score 1 · Answer 3 · answered Aug 24 '18 at 16:09

You can easily fix that by handling 404 responses by yourself and keep rejecting for all other errors as follows:

const promises = projects.map(project =>
  axios.get(`url`, {
    auth: {
      username: 'username',
      password: 'pw'
    }
  }).catch(err => {
    if (err.response.status === 404) {
      return null; // or an empty array or whatever you want
    }
    throw err;
  });
);

See https://github.com/axios/axios#handling-errors for details.

How to skip a promise that doesn't work?

3 Answers3