代码之家 › 专栏 › 技术社区 › Maihan Nijat

如何在React componentDidMount()方法中使用async await?

reactjs javascript

Maihan Nijat · 技术社区 · 7 年前

我想用 async/wait 有反应的 componentDidMount() 等待是一个保留词 错误。我还尝试将语句包装到立即调用的函数中,但没有帮助。

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 null 在console.log中,但是如果我在 fifteenMins = data["forecasts"]; 然后我得到数据。

Await is a reserved word error inside async function

2 回复 | 直到 7 年前

T.J. Crowder 7 年前

async 函数总是返回承诺。自从 componentDidMount 不是作为 异步 函数,React对它返回的承诺没有任何作用。如果你使用 异步 函数,请确保将其所有代码包装在 try catch 这样所有的错误都会被捕获,并且不会出现未处理的异常(这将成为未处理的拒绝)。

问题是你想利用 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
  }
}

组件 通过使用生活:

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

异步 功能(但是功能非常方便):

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

同样,如果你真的决定- 异步 版本,您可以在经办人:

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

Atul 7 年前

如果你正在使用wait,那么你不必使用

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