Parameter pass from one api to another in react-na

问题:

I want to pass a parameter value from one API-Request to 2nd API-request so that 2nd api display result accordingly: Here is my function componentWillMount:

componentWillMount() {
  axios.post('https://APISITE/api/Auth/AuthorizeByApplication?applicationId=b72fc47a-ef82-4cb3-8179-2113f09c50ff&applicationSecret=e727f554-7d27-4fd2-bcaf-dad3e0079821&token=cd431b31abd667bbb1e947be42077e9d')
  .then((response) => { console.log(response.data); });

      axios.get('https://APISITE//api/Stock/GetStockItems',

        { 
            params: {
                keyWord: 454534534543,
                locationId: '',
                entriesPerPage: 100000,
                pageNumber: 1,
                excludeComposites: true,
                //add other params
            },
            headers: 
            { Authorization: 'asdfasdsfdfdfdfsfsdxxx' 
            }
        //}).then((response) => { console.log(response.data); }); 
         }).then((response) => this.setState({ products: response.data }));

         axios.get('https://APISITE//api/Stock/GetStockLevel', {  

            params: { 
                stockItemId: '2f80b45c-85ff-449b-9ad6-ffcc4bb640dd',
                 },
                   headers: 
                   { Authorization: 'asdfasdsfdfdfdfsfsdxxx'
                   }       
      //  }).then(response => console.log(response));
        }).then((response) => this.setState({ racks: response.data }));
}

Value in stockItemId is passed as static value and result displayed in console correctly. How can get stockItemId's value dynamically from 1st-api request?

Edit: Below is data result screenShots of passing stockItemId directly in api and getting from 1st api.

• Getting from 1st api: stockItemId: stockItems.data.StockItemId : http://prntscr.com/i7k0j7
• Directly passing value of stockItemId screenshot- stockItemId: '2f80b45c-85ff-449b-9ad6-ffcc4bb640dd' http://prntscr.com/i7jyq7

回答1:

You need to handle the response data from within the then functions. Notice the way the response from each request is passed into the following then where it can easily used.

componentWillMount() {
  axios
    .post('https://APISITE/api/Auth/AuthorizeByApplication?applicationId='app id'&applicationSecret='app secret'&token='app token'')
    .then((authData) => {
      console.log(authData.data);
      return axios.get('https://APISITE//api/Stock/GetStockItems', {
        params: {
          keyWord: 5055967419551,
          locationId: '',
          entriesPerPage: 100000,
          pageNumber: 1,
          excludeComposites: true,
        },
        headers: {
          Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668'
        }
      })
    })
    .then((stockItems) => {
      this.setState({ products: stockItems.data })
      return axios.get('https://APISITE//api/Stock/GetStockLevel', {
        params: {
          stockItemId: stockItems.data.stockItemId,
        },
        headers: {
          Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668'
        }
      })
    })
    .then((stockLevel) =>
      this.setState({ racks: stockLevel.data })
    )
}

(This code is untested!)

回答2:

First thing never use componentWillMount component life cycle method to set the component state or call any api request for these purpose use componentDidMount for more reading which life cycle use for which purpose read this article and Secondly just add the second api request inside the first api request response with different name response name as given below:

componentDidMount() {
    axios.post('https://APISITE/api/Auth/AuthorizeByApplication?
        applicationId='app id'&applicationSecret='app secret'&token='app token'')
    .then((responseFirst) => { 
        axios.get('https://APISITE//api/Stock/GetStockItems', { 
            params: {
                keyWord: 5055967419551,
                locationId: '',
                entriesPerPage: 100000,
                pageNumber: 1,
                excludeComposites: true,
            },
            headers: { 
                Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668' 
            }
        }).then((responseSecond) => this.setState({ products: responseSecond.data }));

            axios.get('https://APISITE//api/Stock/GetStockLevel', {  
                params: { 
                    stockItemId: responseFirst.data.stockItemId,
                },
                headers: { 
                    Authorization: '0f32ae0d-c4e0-4aca-8367-0af88213d668'
                }       
            }).then((responseThird) => this.setState({ racks: responseThird.data }));
    });
}

if you are using redux then read redux documentation to handle async type actions and how to handle it.