React Native 如何同时获取多个 API？

Question

对于我的项目，我必须在我的项目中获取多个 API，这些 API 与其他 API 相关联，即它们具有相同的数据...

这是我的代码

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    Promise.all([
      getData(),
      getData('?page=2'),
    ])
      .then(([dataSource1, dataSource2]) => {
        this.setState({
          isLoading: false,
          isLoading2: false,
          dataSource1,
          dataSource2,
        });
      })
      .catch((error) => {
        // handle errors
      });
  }

  render() {
    const getData = (subpath = '') => fetch(`https://api.rawg.io/api/games${subpath}`)
      .then(res => res.json())
      .then(result => result.results);
    console.log(getData)
        

  }

我尝试使用 axios 但没有成功...

当我删除评论时，它只显示第二次提取...

Answer 1

您需要对每个 API 进行两次单独的 fetch 调用。要等待两者都完成，请使用Promise.all。

const getData = (subpath = '') => fetch(`https://api.rawg.io/api/games${subpath}`)
    .then(res => res.json())
    .then(result => result.results);

componentDidMount() {
    Promise.all([
        getData(),
        getData('?page=2'),
    ])
        .then(([dataSource1, dataSource2]) => {
            this.setState({
                isLoading: false,
                isLoading2: false,
                dataSource1,
                dataSource2,
            });
        })
        .catch((error) => {
            // handle errors
        });
}