时间戳

首页 > 解决方案 > React useEffect & Axios：在 Axios 中异步调用链式 API

reactjs - React useEffect & Axios：在 Axios 中异步调用链式 API

问题描述

我正在对一个 API 进行多次 API 调用。我需要在以下两个调用中使用第一个调用中的数据。我正在从 NHL API 中提取数据以检索每个会议中的第一名球队。

我已经这样做了：

useEffect(() => {
    axios.get(`https://statsapi.web.nhl.com/api/v1/standings/byConference`)
      .then(res => {
        // 0th element is Eastern Conference leader, 1th is Western Conference Leader
        let teamEndpoint = [Object.values(res.data.records).map((x) => x.teamRecords[0].team.link)];

        // Eastern Conference team API endpoint
        let eastern = teamEndpoint[0];

        // Western Conference team API endpoint
        let western = teamEndpoint[1];

        // Get Eastern Conference Leader team's name
        axios.get(`https://statsapi.web.nhl.com${eastern}/`)
          .then(res => {
            setEasternConferenceLeader(res.data.teams[0].teamName);
          })
          .catch(err => {
            console.log('Error retrieving Eastern Conference Team data : ' + err);
          });
        // Get Eastern Conference Leader team's name
        axios.get(`https://statsapi.web.nhl.com${western}/`)
        .then(res => {
          setWesternConferenceLeader(res.data.teams[0].teamName);
        })
        .catch(err => {
          console.log('Error retrieving Western Conference Team data : ' + err);
        });
      })
  }, []);

第一个调用检索两个端点。一个用于东部会议团队，一个用于西部会议团队。检索两个端点后，我想再用该数据进行两次调用。

我这样做的方式有效，但如果我console.log的数据最初是undefined. 稍后在我的程序中，我使用这些调用的结果来渲染图像，但出现错误。我的猜测是因为我试图在后续 API 调用完成之前渲染图像。

我怎样才能制作上面的代码asynchronous，所以我没有这个问题？

标签： reactjsasynchronouspromiseaxiosuse-effect

解决方案

您的问题与 axios 调用无关，而是在组件初始时您没有处理空数据。您必须检查是否尚未检索到数据，然后渲染诸如旋转加载之类的内容，直到 AJAX 调用完成。

推荐阅读