异步等待在 React 组件中使用时会出现语法错误

Question

我正在尝试在服务器端使用 hapi.js 编写一个基本的反应应用程序。我对使用 webpack 和 babel 很陌生。我的 react 组件 App.jsx 如下：

import React from 'react';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            response: ''
        };
    }

  componentDidMount() {
      this.callApi()
      .then(res => this.setState({ response: res }))
      .catch(err => console.log(err));
  }

  /* Calling hapi.js api endpoint */
  const callApi = async () {  
      const response = await fetch('/list-repos');
      const body = await response.json();

      if (response.status !== 200) throw Error(body.message);

      return body;
  }

  render() {
      return (
          <div style={{textAlign: 'center'}}>
          <h1>Hello World</h1>
          <p className="App-intro">{this.state.response}</p>
          </div>);
      }
}

export default App;

包.json

{
    "name": "client",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
      "start": "webpack-dev-server"
    },
    "dependencies": {
      "babel-plugin-syntax-async-functions": "^6.13.0",
      "babel-plugin-transform-async-to-generator": "^6.24.1",
      "babel-plugin-transform-regenerator": "^6.26.0",
      "html-webpack-plugin": "^2.30.1",
      "path": "^0.12.7",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "webpack": "^3.11.0",
      "webpack-dev-server": "^2.11.1"
  },
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-es2015": "^6.24.1",
   "babel-preset-react": "^6.24.1"
 },
 "proxy": "http://localhost:3000/"
}

.babelrc

{
    "presets":[
       "es2015", "react"
    ],

    "plugins": ["transform-regenerator",
            "syntax-async-functions",
            "transform-async-to-generator"]

 }

当我使用“yarn start”启动服务器时，我不断收到以下错误

ERROR in ./src/components/App.jsx
Module build failed: SyntaxError: Unexpected token (21:8)

  19 |   }
  20 | 
> 21 |   const callApi = async () {
     |         ^
  22 |     const response = await fetch('/list-repos');
  23 |     const body = await response.json();
  24 | 

  @ ./src/index.js 11:11-42
  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
  Child html-webpack-plugin for "index.html":
    1 asset
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 531 bytes {0} [built]
   [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
   webpack: Failed to compile.

我曾尝试使用 babel 插件来转换异步等待代码，但似乎无法正常工作。有人我做错了吗？

Answer 1

你有：

async () {
    // ...
}

但应该是：

async () => {
    // ...
}

此外，您需要将其从类声明中删除。现在，您正试图将其声明为类的属性或方法，但类方法声明不使用const 或类似的赋值。因此，只需在声明类之前将其向上移动即可。

const callApi = async () => {
    // ...
};
export default class App extends React.Component {
    // ...
}

Answer 2

async callApi() {
...
}

callApi = async function() {
...
}

你不能在类成员函数前面使用 const。