如何在React JS中的另一個axios中使用axios響應？

Question

目前，我需要在下一個axios獲取中使用axios響應。

首先獲得：

第一個get返回一個版本ID，例如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);
    });

第二次獲得：

現在我需要在下一個請求中包含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) { ... }

我將如何實現呢？

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) { ... }
}

但檢查您的versionID它是一個數組，而不是一個整數，因為它的結果， map和結果map是一個數組。

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

您將結果鏈接為常規承諾。 您在第一個呼叫中返回下一個axios呼叫，然后獲得響應。

Answer 3

實現此目的的一種方法是，僅在第一個GET的then內調用並使用模板字符串。 像這樣：

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));

或者，您可以使用async/await清理它更多一點。 為此，我想向您推薦MPJ的這段視頻，該視頻探討了async/await的基本概念。