Вызов 2 API на одном экране - PullRequest
Новая
       1

Вызов 2 API на одном экране

0 голосов
/ 07 декабря 2018

В моем собственном приложении реакции я хочу сделать 2 вызова API на одном экране, и у них обоих есть идентификаторы, но когда я выполняю второй вызов, ни один из вызовов не работает, вот код: 

 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})});
  }

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Оба вызова могут быть сделаны внутри 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);
  }
}

Надеюсь, это поможет и устранит любые возникающие проблемы.

0 голосов
/ 07 декабря 2018 
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
  });
}
...