How to use an axios response in another axios get in React JS?

Question

Currently i need to use an axios response in the next axios get.

First get:

The first get returns a version ID for example 10534 .

axios.get('https://jira.example.co.uk/rest/api/2/project/PAD/versions', headers)
.then(function(response) {
    const versionID = response.data.map(function(version){     
        const vId = version.id;

        return vId;
    });

    return versionID;
    })
    .catch(err => {
         console.error(err, err.stack);
    });

Second get:

Now i need to include the versionID in the next request

axios.all([
    axios.get('https://jira.example.co.uk/rest/api/2/search?jql=project = 10005 AND fixVersion = versionID ORDER BY priority DESC, key ASC', headers),
    axios.get('https://jira.example.co.uk/rest/api/2/search?jql=status IN (Reported) AND project = 10005 AND fixVersion = versionID ORDER BY priority DESC, key ASC', headers),
    axios.get('https://jira.example.co.uk/rest/api/2/search?jql=status IN (Confirmed) AND project = 10005 AND fixVersion = versionID ORDER BY priority DESC, key ASC', headers))
    ])
    .then(axios.spread(function (response1, response2, response3) { ... }

How would i achieve this?

Answer 1

axios.get('https://jira.example.co.uk/rest/api/2/project/PAD/versions', headers)
.then(function(response) {
    const versionID = response.data.map(function(version){     
        const vId = version.id;

        return vId;
    });

    getAnotherRequest(versionID);
    })
    .catch(err => {
         console.error(err, err.stack);
    });


getAnotherRequest(versionID){
    axios.all([
        axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers),
        axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=status IN (Reported) AND project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers),
        axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=status IN (Confirmed) AND project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers)
    ])
    .then(axios.spread(function (response1, response2, response3) { ... }
}

But check your versionID it's an array and not an integer, because it's a result of map and result of map is an array.

Answer 2

axios.get('https://jira.example.co.uk/rest/api/2/project/PAD/versions', headers)
    .then(function(response) {
            const versionID = response.data.map(function(version) {
                const vId = version.id;

                return vId;
            });

            return axios.all([
                axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers),
                axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=status IN (Reported) AND project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers),
                axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=status IN (Confirmed) AND project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers))]);
    }).then(axios.spread(function(response1, response2, response3) { ...
            })
            .catch(err => {
                console.error(err, err.stack);
            });

You chain the results as regular promises. You return the next axios call in the first call then get the response.

Answer 3

One way to achieve this would be to just call inside the then of your first GET and use a template string. Like so:

const getMyStuff = new Promise((resolve, reject) => {
  axios.get('https://jira.example.co.uk/rest/api/2/project/PAD/versions', headers)
    .then((response) => {
      const versionID = response.data.map(({ id }) => id);

      axios.all([
        axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers),
        axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=status IN (Reported) AND project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers),
        axios.get(`https://jira.example.co.uk/rest/api/2/search?jql=status IN (Confirmed) AND project = 10005 AND fixVersion = ${versionID} ORDER BY priority DESC, key ASC`, headers),
      ])
      .then(resolve)
      .catch(reject)
    })
    .catch(reject);
});

getMyStuff()
  .then((...args) => console.log(args))
  .catch((err) => console.error(err));

Alternatively you could use async/await to clean it up a bit more. For that I'd like to refer you to this video by MPJ which explores the basic concept of async/await .