React Native中如何将首个API参数动态传递给后续API请求

你现在的核心问题是三个API请求是并行发起的，后面的请求没办法拿到前面请求的响应数据——毕竟它们没等前面的请求完成就发送了。要实现从GetStockItems的响应中获取stockItemId并传给GetStockLevel，你需要把请求改成顺序执行，下面提供两种易实现的方案：

方案一：使用Promise链式调用 #

通过.then()把请求串联起来，确保每个请求都在前一个完成后再执行：

componentWillMount() {
  // 1. 先发起授权请求，获取认证token
  axios.post('https://APISITE/api/Auth/AuthorizeByApplication', {
    applicationId: 'b72fc47a-ef82-4cb3-8179-2113f09c50ff',
    applicationSecret: 'e727f554-7d27-4fd2-bcaf-dad3e0079821',
    token: 'cd431b31abd667bbb1e947be42077e9d'
  })
  .then(authRes => {
    // 提取授权token（根据你的实际响应字段调整）
    const authToken = authRes.data.token;
    // 2. 发起GetStockItems请求，同时把token传递下去
    return axios.get('https://APISITE/api/Stock/GetStockItems', {
      params: {
        keyWord: 454534534543,
        locationId: '',
        entriesPerPage: 100000,
        pageNumber: 1,
        excludeComposites: true
      },
      headers: { Authorization: authToken }
    }).then(stockRes => ({ authToken, stockRes }));
  })
  .then(({ authToken, stockRes }) => {
    // 把产品数据存入state
    this.setState({ products: stockRes.data });
    // 从响应中提取动态的stockItemId
    const stockItemId = stockRes.data.StockItemId;
    // 3. 用动态获取的stockItemId发起GetStockLevel请求
    return axios.get('https://APISITE/api/Stock/GetStockLevel', {
      params: { stockItemId },
      headers: { Authorization: authToken }
    });
  })
  .then(levelRes => {
    // 把库存水平数据存入state
    this.setState({ racks: levelRes.data });
  })
  .catch(error => {
    // 全局捕获请求错误，避免流程中断
    console.error('请求出错:', error);
  });
}

方案二：使用async/await（更易读） #

async/await让异步代码看起来像同步代码，可读性更强，错误处理也更集中：

async componentWillMount() {
  try {
    // 1. 完成授权请求
    const authResponse = await axios.post('https://APISITE/api/Auth/AuthorizeByApplication', {
      applicationId: 'b72fc47a-ef82-4cb3-8179-2113f09c50ff',
      applicationSecret: 'e727f554-7d27-4fd2-bcaf-dad3e0079821',
      token: 'cd431b31abd667bbb1e947be42077e9d'
    });
    const authToken = authResponse.data.token;

    // 2. 获取产品列表并提取stockItemId
    const stockItemsResponse = await axios.get('https://APISITE/api/Stock/GetStockItems', {
      params: {
        keyWord: 454534534543,
        locationId: '',
        entriesPerPage: 100000,
        pageNumber: 1,
        excludeComposites: true
      },
      headers: { Authorization: authToken }
    });
    this.setState({ products: stockItemsResponse.data });
    const stockItemId = stockItemsResponse.data.StockItemId;

    // 3. 用动态ID获取库存水平
    const stockLevelResponse = await axios.get('https://APISITE/api/Stock/GetStockLevel', {
      params: { stockItemId },
      headers: { Authorization: authToken }
    });
    this.setState({ racks: stockLevelResponse.data });
  } catch (error) {
    console.error('数据获取失败:', error);
    // 这里可以添加用户友好的错误提示，比如弹出Toast
  }
}

几个关键注意事项 #

• 你的原代码中URL存在双斜杠//api/Stock，建议改成单斜杠/api/Stock，避免潜在的路径解析问题。
• 原授权请求用POST但参数放在URL query里，通常POST请求的参数放在请求体更规范，如果后端允许的话，建议改成上面代码中的请求体传递方式。
• 推荐替换componentWillMount：这个生命周期方法在React 16.3+已被标记为不安全，建议改用componentDidMount，它只会在客户端渲染完成后执行一次，更符合数据请求的场景。

内容的提问来源于stack exchange，提问作者Sharma