如何通过 React componentDidMount() 方法使用异步等待？

Question

我想将 async/wait 与 React componentDidMount() 方法一起使用，但我收到 await is a reserved word 错误。我还尝试将语句包装在立即调用函数中，但没有帮助。

async componentDidMount() {
  this.geoLocation.getAddress().then(location => {
    if (location.address != null && location.error != "undefined") {
      let fifteenMins = [];
      await this.getFifteenMinsData(y, x).then(
        data => {
          fifteenMins = data["forecasts"];
        }
      );
        console.log(fifteenMins);
    } 
  });
}

如果我删除了await 关键字，那么我会在console.log 中得到null，但是如果我在fifteenMins = data["forecasts"]; 之前进行控制台日志，那么我会得到数据。

相关问题： Await is a reserved word error inside async function

Answer 1

async 函数总是返回承诺。由于componentDidMount 没有被设计/记录为async 函数，因此React 不会对它返回的承诺做任何事情。如果您为此使用async 函数，请确保将其所有代码包装在try/catch 中，以便捕获所有错误并且您不会以未处理的异常结束（这将成为未处理的拒绝） .

问题是您试图在非async 函数中使用await：您传递的回调then。使用async/await 时，您几乎从不使用then。而是：

async componentDidMount() {
  try {
    const location = await this.geoLocation.getAddress();
    if (location.address != null && location.error != "undefined") {
      const data = await this.getFifteenMinsData(y, x);
      let fifteenMins = data["forecasts"];
      console.log(fifteenMins);
    } 
  } catch (err) {
      // Do something with the fact an error occurred
  }
}

或者通过使用 IIFE 避免从 componentDidMount 返回承诺：

componentDidMount() {
  (async () => {
    const location = await this.geoLocation.getAddress();
    if (location.address != null && location.error != "undefined") {
      const data = await this.getFifteenMinsData(y, x);
      let fifteenMins = data["forecasts"];
      console.log(fifteenMins);
    } 
  })()
  .catch(error => {
    // Do something with the fact an error occurred
  });
}

或者根本不使用async 函数（但async 函数真的很方便）：

componentDidMount() {
  this.geoLocation.getAddress()
    .then(location => {
      if (location.address != null && location.error != "undefined") {
        return this.getFifteenMinsData(y, x)
          .then(data => {
            let fifteenMins = data["forecasts"];
            console.log(fifteenMins);
          });
      } 
    })
    .catch(error => {
      // Do something with the fact an error occurred
    });
}

---

旁注：这对线：

const data = await this.getFifteenMinsData(y, x);
let fifteenMins = data["forecasts"];

如果你愿意，可以这样写，将结果解构到fifteenMins变量中：

let {fifteenMins: forecasts} = await this.getFifteenMinsData(y, x);

同样，如果您确实决定使用非async 版本，您可以在then 处理程序的参数列表中执行此操作：

.then(({fifteenMins: forecasts}) => {
  console.log(fifteenMins);
});

Answer 2

如果你正在使用 await 你不必使用 then

let data=  await this.getFifteenMinsData(y, x);

编辑

let location = await this.geoLocation.getAddress();
  //do your stuff
  if (location.address != null && location.error != "undefined") {
    let fifteenMins = [];
    let data = await this.getFifteenMinsData(y, x);
    fifteenMins = data["forecasts"];
      console.log(fifteenMins);
  }