await 是 ReactJS 中的保留字错误答案

【问题标题】：await is a reserved word error in ReactJSawait 是 ReactJS 中的保留字错误
【发布时间】：2019-03-05 18:21:42
【问题描述】：

我是 ReactJS 的新手，我使用 simple-oauth 连接到测试 API。我添加了客户端 ID、客户端密码、用户名和密码以及 oauth 令牌 URL。我收到语法错误await is a reserved word (40:21)

以下是我当前的代码，它是来自 simple-oauth 的示例：-

const credentials = {
  client: {
    id: "CLIENT_ID",
    secret: "CLIENT_SECRET"
  },
  auth: {
    tokenHost: "http://localhost/oauth/token"
  }
};

const oauth2 = require('simple-oauth2').create(credentials);

const tokenConfig = {
  username: "USERNAME",
  password: "PASSWORD",
  scope: '<scope>',
};

try {
  const result = await oauth2.ownerPassword.getToken(tokenConfig);
  const accessToken = oauth2.accessToken.create(result);
} catch (error) {
  console.log('Access Token Error', error.message);
}

我也试过异步功能。虽然错误消失了，但控制台日志没有被触发。这是异步函数代码：-

async () => {
  const result = oauth2.ownerPassword.getToken(tokenConfig);
  const accessToken = oauth2.accessToken.create(result);
  // no console.log in the debugger
  console.log(result);
};

代码中可能有什么问题？请帮忙。

【问题讨论】：

Await is a reserved word error inside async function的可能重复

标签： reactjs simple-oauth2

【解决方案1】：

我也试过异步功能。虽然错误消失了，控制台日志没有被触发。

因为你没有调用你的函数。你需要的是Self Invoking Function:

(async () => {
    const result = oauth2.ownerPassword.getToken(tokenConfig);
    const accessToken = oauth2.accessToken.create(result);
    // no console.log in the debugger
    console.log(result);
  })();

【讨论】：

酷...现在工作正常。非常感谢 :) 自我调用功能是我所需要的。我从你那里学到了一些有用的东西。谢谢:)

【解决方案2】：

代码行没有被触发。您将需要包装到 async 函数中并从某个地方调用该函数 componentDidMount 将是一个好地方。

const funcName = async () => {
const result = await oauth2.ownerPassword.getToken(tokenConfig);
const accessToken = oauth2.accessToken.create(result);
// no console.log in the debugger
console.log(result);
};

componentDidMount(){
  this.funcName();
}

【讨论】：

您缺少 await 关键字，这正是 OP 所犯的错误。

【解决方案3】：

您必须将componentWillMount（或componentDidMount）声明为async，才能使用await。您可以通过更改签名来做到这一点：

async componentWillMount() {

  const result = await oauth2.ownerPassword.getToken(tokenConfig);
  const resultJson = await result.json();
  const accessToken = await oauth2.accessToken.create(resultJson);
  const accessTokenJson = await accessToken.json();

  //if you need
  this.setState({
    accessTokenJson,
  });

  //For debugging
  console.log('result', {resultJson, accessTokenJson});
}

【讨论】：

【解决方案4】：

handleSubmit = async (e) => {
e.preventDefault();
console.log("form Submit ", this.state);
const { email, password } = this.state;

try {
  const config = {
    "content-type": "application/json",
  };
  this.setState({ loading: true });
  const { data } = await axios.post(
    "/api/users/login",
    {
      email,
      password,
    },
    config
  );
} catch (e) {
  console.error("Error Login!", e);
  this.setState({
    error: e.response.data.message,
  });
}

};

【讨论】：