Question

在我的本地本机应用程序中，我想在同一屏幕上进行2个API调用，并且它们都具有ID，但是当我进行第二次调用时，这些调用都不起作用，代码如下：

 async componentDidMount(){
    axios.get('http://reduxblog.herokuapp.com/api/posts/{{ID}}')
     .then((response) =>  { this.setState({ data: response.data})});
  }

  async componentDidMount(){
    axios.get('http://reduxblog.herokuapp.com/api/comments={{ID}}')
     .then((response) =>  { this.setState({ data: response.data})});
  }

Answer 1

componentDidMount() {
  const { id } = this.props; // I am not sure how you get ID
  this.loadData(id);
}

loadData = async (id) => {
  const posts = await axios.get(`http://reduxblog.herokuapp.com/api/posts/${id}`);
  const comments = await axios.get(`http://reduxblog.herokuapp.com/api/comments/${id}`);
  this.setState({
    posts,
    comments
  });
}

Answer 2

两个呼叫都可以在componentDidMount()

内进行

async componentDidMount(){
    axios.get('http://reduxblog.herokuapp.com/api/posts/{{ID}}')
     .then((response) =>  { this.setState({ posts: response.data})})
     .catch(error => console.warn(error));

    axios.get('http://reduxblog.herokuapp.com/api/comments={{ID}}')
     .then((response) =>  { this.setState({ comments: response.data})})
     .catch(error => console.warn(error));
  }

但是，您需要捕获发生的任何错误。您还应该更改正在写入状态的项目。由于这两个调用都在写入数据，这意味着第二个调用将覆盖第一个调用的结果，并赋予每个

另一种方法是使用async/await，但是这些函数会抛出，因此您需要确保将它们包装在try/catch中。使用async/await意味着您不必拥有.then和.catch的无尽链，但这确实意味着您必须捕获它们引发的任何错误。

我们可以通过以下方式更新函数调用以使用async/await：

async componentDidMount() {
  try {
    const postResponse = await axios.get(`http://reduxblog.herokuapp.com/api/posts/${ID}`);
    const commentResponse = await axios.get(`http://reduxblog.herokuapp.com/api/comments/${ID}`);
    this.setState({ posts: postResponse.data, comments: commentResponse.data });
  } catch (err) {
    console.warn(err);
  }
}

我希望这会有所帮助，并且可以解决您遇到的所有问题。

在同一屏幕上调用2个API

2 个答案: