Question

如何将以下代码更改为异步语法？

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}`);
          });
}

我试过这样做：

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

我收到以下错误：语法错误：C：/Users/EYAL/web/fe/react/airbnb/src/Homes/index.js：await是保留字（17:14）

Answer 1

您必须将componentWillMount方法声明为async才能使用await。您可以通过更改签名来实现：

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

同样.json是一种方法，因此它应该是res.json()。（谢谢bennygenel）

将提取更改为异步语法

1 个答案: