如何从多个 API 调用中正确获取数据并将其显示到 React 中的 DOM答案

【问题标题】：How to properly fetch data from several API calls and display it to the DOM in React如何从多个 API 调用中正确获取数据并将其显示到 React 中的 DOM
【发布时间】：2019-05-08 21:52:45
【问题描述】：

我有一个组件可以显示来自特定 API 调用的最佳结果。我的问题是如何正确有效地进行多个 API 调用并显示它们。我目前正在开始两次呼吁顶级电视和顶级播出。

我意识到我的初始状态只包含一个空数组，我需要一个额外的用于我想要返回的每个特定结果，但我目前卡住了。我尝试使用 async await 来获得一个结果，但是在调用多个结果时我一直没有成功。

class HomePage extends Component {
  state = {
    topTv: []
  }

componentDidMount() {
    const api = 'https://api.jikan.moe/v3'
    const urls = [
      fetch(`${api}/top/anime/1/tv`),
      fetch(`${api}/top/anime/1/airing`)
    ]

    Promise.all(urls)
      .then(res => Promise.all(res.map(r => r.json())))
      .then(data => this.setState = ({
        topTv: data
      }))
      .catch(err => console.log('There was an error:' + err))
  }

  render() {
    return (
      <HomeWrapper>
        <h2>Top anime</h2>
        <TopAnime>
          {this.state.topTv.map((ani) => {
            return (
              <div key={ani.mal_id}>
                <img src={ani.image_url} alt='anime poster' />
                <h3>{ani.title}</h3>
              </div>
            )
          }).splice(0, 6)}
        </TopAnime>
      </HomeWrapper>
    )
  }
}

【问题讨论】：

你为什么有.splice(0, 6)？
就是获取调用的前6个结果

标签： javascript reactjs

【解决方案1】：

当前尝试的问题只是您使用setState 的方式。这是一个函数，而不是您正在设置的变量。

this.setState = ({
    topTv: data
}))

应该是

this.setState({
    topTv: data
}))

您可能还想从 data 中合并实际数组，然后合并 setState。

 const results = [...data[0].top, ...data[1].top];
 this.setState({
    topTv: results
 }))

请注意，Promise.all 工作正常。但是，如果您正在寻找 async await 示例，我创建了一个 sandbox。

请注意urls 只是字符串数组，并没有用 fetch 包装。

干杯！

【讨论】：

非常感谢。我不敢相信我把 setState 写成一个变量。我确实使用了异步示例。
进一步解决这个问题。如何将两个数据数组显示到 DOM？第一个出现，但添加第二个状态没有任何作用。

【解决方案2】：

您可以将 fetch 替换为您创建的 asyncawait fetchJson 函数，如下所示。

async function fetchJson(url){
return new Promise((resolve,reject)=>{
    try{
        var resp = await fetch(url)
        data = await resp.json();
        resolve(data);
    }catch(e){
        //reject or do something else with the error
    }
}) }

您可以使用它来获取多个调用，如下所示。

const urls = [
fetch(`${api}/top/anime/1/tv`),
fetch(`${api}/top/anime/1/airing`)]

Promise.all(urls).then(responseArr=>{
    //do something with the array
}).catch(err=>{/*do something with error*/})

我认为为我编写一个处理嵌套回调或承诺链的函数要容易得多，所以我不需要每次都为它烦恼。这种方式也没有性能差异或瀑布效应。

在指定每个调用时，您可能希望使用像

这样的 url 数组

[{url:'myApiUrl', functionOrKey: ''}]

然后你可以将responseArr映射到索引值，并通过索引到达它的statekey，或者将数据传递给它对应的函数。

【讨论】：