首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React API & Axios:在Axios中异步进行链式useEffect调用

React API & Axios:在Axios中异步进行链式useEffect调用
EN

Stack Overflow用户
提问于 2020-05-20 09:39:11
回答 1查看 82关注 0票数 0

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

我已经做到了这一点:

代码语言:javascript
复制
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,这样我就没有这个问题了?

EN

回答 1

Stack Overflow用户

发布于 2020-05-20 09:48:08

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61903690

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档