DEV Community

Dieldore
Dieldore

Posted on

Huge problem: code does not go further than await

Code in App.js

componentDidMount() {
    this.getAccountData();
}
async getAccountData() {
    try {
      let FD = new FormData();
      FD.append('test', true);
      let Q = fetch('/ajax/get', {
        method: 'POST',
        body: FD
      });
      let data = await Q.json();
      console.log(data);
      this.setState({
        id: data.id,
        name: data.name
      });
    }
    catch(e) {
      console.log('error');
    };
  }

After await is called, it gets the data in JSON. But if you put console.log after it, then they do not work, so setState also breaks my application. debugger also does not work there.
I am using firefox 68.6 and 80.0.3987.132

Discussion (2)

Collapse
r0bnet profile image
rob • Edited on

You have to await Q and then execute .json() on the result. fetch() returns a promise that can be awaited.

Would probably go for something like:

 let Q = await fetch('/ajax/get', {
  method: 'POST',
  body: FD
});
let data = await Q.json();

Read 4th parahraph under Concepts and usage:
developer.mozilla.org/en-US/docs/W...

Collapse
dieldore profile image
Dieldore Author

Thank you, just noticed. In a hurry forgot to specify await