Как асинхронно получать данные в componentDidMount от Axios - PullRequest
0 голосов
/ 29 февраля 2020

Я пытаюсь так: -

state = {
    profiles: [],
    data: []
}

async componentDidMount() {
    try {
     // this commented code works. But I want to use axios api.
    //   const response = await fetch(`http://localhost:8080/all/profile`);
    //   const json = await response.json();
    //   this.setState({ data: json });
    //   const json = await response.json();
        let response = await CurdApi.getAllProfiles(); // response always undefined. 

        this.setState({ data: response });
    } catch (error) {
      console.log(error);
    }
}

Мой класс CurdApi здесь: -

export default class CurdApi {

  static async getAllProfiles() {
    await axios({
      url: 'http://localhost:8080/all/profile',
      method: 'GET',
      responseType: 'json',
    })
    .then((response) => {
      return response.data;
    })
    .catch((error) =>{
      return error.data;
    });
  }
} 

Я новичок в ReactJs, а также в JS. Я не понимаю, как правильно использовать этот async / await. Я должен представить эти данные, когда я получаю эти данные.

Ответы [ 3 ]

0 голосов
/ 29 февраля 2020

getAllProfiles не имеет оператора возврата, поэтому он ничего не возвращает. Обратные вызовы .then имеют операторы возврата, но они просто возвращаются из своих внутренних функций, а не из внешней функции. Я бы рекомендовал использовать async / await и изменить его на:

static async getAllProfiles() {
  const response = await axios({
    url: 'http://localhost:8080/all/profile',
    method: 'GET',
    responseType: 'json',
  })
  return response.data;
}
0 голосов
/ 29 февраля 2020

Это простой случай использования asyn c -aait в JS:

async function asyncFunc() {
      const data = await axios.get("/url_endpoint")
                         .then((response) => return response.data)

      return data;
}

Asyn c возвращает обещание, и Await может использоваться только внутри asyn c блок. Вы можете вызвать эту функцию в методе ComponentDidMount () компонента класса. Я думаю, что вы можете удалить asyn c из componentDidMount и ждать внутри него.

0 голосов
/ 29 февраля 2020

Не используйте await и then.

export default class CurdApi {

static async getAllProfiles() {

    return await axios({
     url: 'http://localhost:8080/all/profile',
     method: 'GET',
     responseType: 'json',
   })

  }
}
...