Question

我想将参数值从一个API-Request传递给第二个API请求，以便第二个api显示结果：这是我的函数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 }));
}

stockItemId 中的值作为静态值传递，结果正确显示在控制台中。如何从1st-api请求中动态获取stockItemId的值？

编辑：以下是直接在api中传递stockItemId并从第1个api获取的数据结果screenShots。

从第1次api开始：stockItemId: stockItems.data.StockItemId：http://prntscr.com/i7k0j7
直接传递stockItemId屏幕截图的值 - stockItemId: '2f80b45c-85ff-449b-9ad6-ffcc4bb640dd' http://prntscr.com/i7jyq7

Answer 1

第一个事物从不使用componentWillMount组件生命周期方法 设置组件状态或调用任何api请求 为了这些目的使用componentDidMount更多阅读哪个生命周期用于哪个目的读 this comment 和其次只需在第一个api请求响应中添加第二个api请求，其中包含不同的名称响应名称，如下所示：

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

如果您使用的是redux，请阅读this article以及如何处理它。

Answer 2

您需要处理then函数中的响应数据。请注意每个请求的响应传递到以下then可以轻松使用的方式。

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

（此代码未经测试！）

参数在react-native

2 个答案: