Change fetch to async syntax

Question

How can I change the following code to async syntax?

componentWillMount(){
 fetch('http://localhost:9000/api/homes')
          .then( response => {
              if(response.ok) {
                  return response.json();
              }
              throw new Error('Network response was not ok.');    
          })
          .then( data => {
              this.setState({
                  originalList:data,
                  displayedList: data
              });
          }
        )
          .catch( error => {
              console.error(`fetch operation failed: ${error.message}`);
          });
}

I have tried to do it like this:

componentWillMount(){
  const res = await fetch('http://localhost:9000/api/homes');
  const json = await res.json;
              this.setState({
                  originalList:json,
                  displayedList: json
              });
}

and I get the following error: Syntax error: C:/Users/EYAL/web/fe/react/airbnb/src/Homes/index.js: await is a reserved word (17:14)

await res.json()? or maybe res.json() does not return promise — Fan Cheung
– Fan Cheung, Commented Oct 18, 2017 at 12:03

topher · Accepted Answer · 2017-10-18 12:26:22Z

4

You have to declare the componentWillMount method as async in order to use await. You can do that by changing the signature:

async componentWillMount() {
  const res = await fetch('http://localhost:9000/api/homes');
  const json = await res.json();
  this.setState({
    originalList: json,
    displayedList: json
  });
}

Also .json is a method so it should be res.json(). (Thanks bennygenel)

edited Oct 18, 2017 at 12:26

answered Oct 18, 2017 at 12:04

topher

14.9k8 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bennygenel Over a year ago

.json is a method so it should be res.json(). Maybe you should add that as well

Collectives™ on Stack Overflow

Change fetch to async syntax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related