Блог

Я пытаюсь извлечь данные и установить состояние в приложении React. Хотя выборка выполнена успешно, как я могу видеть данные в chrome dev tools, выполнение останавливается на операторе await в приведенном ниже коде. Регистрируется только «получение данных». Похоже, что после инструкции fetch функция возвращается, при этом все следующие шаги выполняются успешно.

Что я делаю не так?? Мы высоко ценим любую помощь.

 import util from "util";
const fetchProm = util.promisify(fetch)
....
getDataFromDb = async () => {
    console.log('getting data')
    let result = await fetchProm("http://localhost:3001/getData")
      .then(data => {
        console.log("then1:",data)
        return data.json()
      })
      .then(res => {
        console.log('then2:', res.data)
        return { data: res.data }
      })
      .catch(err => {
        return { err: err.data }
      });
    console.log("result:", result)
    this.setState({ data: result.data })
  };
  

вам не нужно .затем обратный вызов, если вы используете async-await. попробуйте приведенный ниже пример :

 import util from "util";
const fetchProm = util.promisify(fetch)

getDataFromDb = async () => {
    console.log('getting data')
    let {data} = await fetchProm("http://localhost:3001/getData");
    console.log("result:", data)
    this.setState({ data })
  };

  

С помощью async / wait вам не нужно then . Также вы обнаруживаете ошибки во втором, а не в первом.

Можете ли вы попробовать:

  let result = await fetchProm("http://localhost:3001/getData")

console.log(result)
  

и посмотреть, работает ли это?

При использовании async/await не забудьте обработать свои исключения с помощью try/catch изменения кода на:

 import util from "util";

getDataFromDb = async () => {
    try{
        let {data} = await fetchProm("http://localhost:3001/getData");
        this.setState({ data })
    }
    catch(err=> this.setState({ err: err.data }))
};