javascript - How to use async await with React componentDidMount() method? - Stack Overflow

admin管理员组

文章数量:1356830

I want to use async/wait with React ponentDidMount() method but I am getting await is a reserved word error. I also tried wrap the statement in Immediate Invoked Function but it didn't help.

async ponentDidMount() {
  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);
    } 
  });
}

If I remove the await keyword, then I get null in console.log, but if I do console log right before fifteenMins = data["forecasts"]; then I get data.

Related question: Await is a reserved word error inside async function

I want to use async/wait with React ponentDidMount() method but I am getting await is a reserved word error. I also tried wrap the statement in Immediate Invoked Function but it didn't help.

async ponentDidMount() {
  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);
    } 
  });
}

If I remove the await keyword, then I get null in console.log, but if I do console log right before fifteenMins = data["forecasts"]; then I get data.

Related question: Await is a reserved word error inside async function

• javascript
• reactjs

Share Improve this question Follow asked Aug 15, 2018 at 16:06 Maihan NijatMaihan Nijat 9,3651313 gold badges6868 silver badges117117 bronze badges 2

• what's your node version? – Dhaval Jardosh Commented Aug 15, 2018 at 16:07
• valentinog./blog/how-async-await-in-react – Dhaval Jardosh Commented Aug 15, 2018 at 16:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

async functions always return promises. Since ponentDidMount isn't designed/documented as an async function, React doesn't do anything with the promise it returns. If you use an async function for this, be sure to wrap all its code in try/catch so that all errors are caught and you don't end up with an unhandled exception (which bees an unhandled rejection).

The problem is that you're trying to use await in a non-async function: The callback you've passed then. When using async/await, you almost never use then. Instead:

async ponentDidMount() {
  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
  }
}

Or avoiding returning a promise from ponentDidMount by using an IIFE:

ponentDidMount() {
  (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
  });
}

Or don't use an async function at all (but async functions are really handy):

ponentDidMount() {
  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
    });
}

---

Side note: This pair of lines:

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

can be written like this if you like, destructuring the result into the fifteenMins variable:

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

Similarly, if you did decide to go with the non-async version, you can do that in the parameter list of the then handler:

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

if you are using await you dont have to use then

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

edit

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

本文标签： javascriptHow to use async await with React componentDidMount() methodStack Overflow