Почему setState в этом обещании требует больше времени для обновления, чем тот же код, что и в асинхронной функции? - PullRequest
Новая
       7

Почему setState в этом обещании требует больше времени для обновления, чем тот же код, что и в асинхронной функции?

0 голосов
/ 28 мая 2019

У меня есть 2 версии одинаковых функций извлечения, первая использует обещания, вторая async-await.Насколько я понимаю, между этими двумя не должно быть никакой разницы, поэтому я был бы признателен за разъяснение того, что на самом деле здесь происходит.

Следующая версия, которая использует async-await, устанавливает состояние к моменту запуска журнала консоли.: 

async fetchPostList(query) {
  const response = await fetch(`https://hacker-news.firebaseio.com/v0/${query}.json`)
  const data = await response.json()
  this.setState({ postList: data });
  console.log(this.state.postList);
}

Консоль: Array(474) [ ... ]

Версия, использующая обещания, устанавливает состояние после журнала консоли: 

fetchPostList(query) {
  fetch(`https://hacker-news.firebaseio.com/v0/${query}.json`)
    .then( response => response.json())
    .then( data => this.setState({ postList: data }))
  console.log(this.state.postList);
}

Консоль: Array []

Ответы [ 2 ]

3 голосов
/ 28 мая 2019

Первая функция - это асинхронная функция.В асинхронной функции код приостанавливается, пока разрешаются ожидаемые обещания. 

async fetchPostList(query) {
  const response = await fetch(`https://hacker-news.firebaseio.com/v0/${query}.json`)
  /* Pause ...*/

  const data = await response.json() 
  /* Pause ... */

  this.setState({ postList: data });
  console.log(this.state.postList);
}

Вторая функция не асинхронная, что означает, что она выполняется до конца.Он просто запускает обещания и обратные вызовы и продолжает работу, поэтому console.log() вызывается сразу после создания обещаний. 

fetchPostList(query) {
  fetch(`https://hacker-news.firebaseio.com/v0/${query}.json`)
    .then( response => response.json())
    .then( data => this.setState({ postList: data }))

  /* does NOT pause */
  console.log(this.state.postList);
}
2 голосов
/ 28 мая 2019

Если вы хотите регистрировать обновленное состояние, вы должны подождать, пока Обещание разрешит некоторые данные, только когда у вас есть данные, вы можете записать сами данные: 

fetchPostList(query) {
  fetch(`https://hacker-news.firebaseio.com/v0/${query}.json`)
   .then( response => response.json())
   .then( data => {
     this.setState({ postList: data })
     // here you have data
     console.log(this.state.postList);
   })
// here you do not have data
}
...