react-native 中的参数从一个 api 传递到另一个

Question

我想将一个 API 请求中的参数值传递给第二个 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并从第一个api获取的数据结果截图。

• 从第一个 api 获取：stockItemId: stockItems.data.StockItemId：http://prntscr.com/i7k0j7
• 直接传递stockItemId的值截图-stockItemId: '2f80b45c-85ff-449b-9ad6-ffcc4bb640dd'http://prntscr.com/i7jyq7

Answer 1

您需要在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 })
    )
}

（此代码未经测试！）

Answer 2

第一件事从不使用componentWillMount组件生命周期方法设置组件状态或调用任何api请求为这些目的使用componentDidMount更多阅读哪个生命周期用于哪个目的阅读this article和其次只需添加第二个第一个 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，请阅读 redux documentation to handle async type actions 以及如何处理它。