CODEWITHSUNDEEP
javascriptreactjsasync-awaitaxios
Jota
Jota

Reputation: 865

Async and Await not working in Axios React

i have a problem:

I want that my axios make the requistion and after it makes the this.setState with the result saved in a variable.

My code:

componentDidMount() {
  let mails = [];
  axios.get('/api/employee/fulano')
    .then(res => this.setState({
      employees: res.data
    }, () => {

      this.state.employees.map(i => {
        async axios.get(`/api/status/${i.mail}`)
          .then(res => {
            mails.push(res.data)
            await this.setState({
              mails: mails
            })
          })
          .catch(err => console.log(err))
      })
    }))
    .catch(err => console.log(err))
}

But it gives error syntax.

Best explanation: I want saved all results of the map in the variable mails and later to use the setState to changes the result of just a time.

Someone could tell me where i'm wandering? Please.

Upvotes: 3

Views: 12359

Answers (4)

Matt Carlotta
Matt Carlotta

Reputation: 19762

It's not a good practice to mix async/await with .then/.catch. Instead use one or the other. Here's an example of how you could do it using ONLY async/await and ONLY one this.setState() (reference to Promise.each function):

componentDidMount = async () => {
  try {    
    const { data: employees } = await axios.get('/api/employee/fulano'); // get employees data from API and set res.data to "employees" (es6 destructing + alias)

    const mails = []; // initialize variable mails as an empty array

    await Promise.each(employees, async ({ mail }) => { // Promise.each is an asynchronous Promise loop function offered by a third party package called "bluebird"
      try {
       const { data } = await axios.get(`/api/status/${mail}`) // fetch mail status data
       mails.push(data); // push found data into mails array, then loop back until all mail has been iterated over
      } catch (err) { console.error(err); }
    })

    // optional: add a check to see if mails are present and not empty, otherwise throw an error.

    this.setState({ employees, mails }); // set employees and mails to state
  } catch (err) { console.error(err); }

}

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281626

You are using async await at the wrong places. async keyword must be used for a function that contains asynchronous function

await keyword needs to be used for an expression that returns a Promise, and although setState is async, it doesn't return a Promise and hence await won't work with it

Your solution will look like

componentDidMount() {
  let mails = [];
  axios.get('/api/employee/fulano')
    .then(res => this.setState({
      employees: res.data
    }, async () => {

      const mails = await Promise.all(this.state.employees.map(async (i) => { // map function contains async code
        try {
             const res = await axios.get(`/api/status/${i.mail}`)
             return res.data;
        } catch(err) { 
            console.log(err)
        }
      })
      this.setState({ mails })
    }))
    .catch(err => console.log(err))
}

Upvotes: 5

Jaromanda X
Jaromanda X

Reputation: 1

You put async in the wrong place

async should be placed in a function definition, not a function call

componentDidMount() {
    let mails = [];
    axios.get('/api/employee/fulano')
    .then(res => this.setState({
        employees: res.data
    }, () => {
        this.state.employees.map(i => {
            axios.get(`/api/status/${i.mail}`)
            .then(async (res) => {
                mails.push(res.data)
                await this.setState({
                    mails: mails
                })
            })
            .catch(err => console.log(err))
        })
    }))
    .catch(err => console.log(err))
}

Upvotes: 1

Rex Ogbemudia
Rex Ogbemudia

Reputation: 157

This should work:

    componentDidMount() {
        axios.get('/api/employee/fulano')
         .then(res => this.setState({
          employees: res.data
         }, () => {

           this.state.employees.map(i => {
           axios.get(`/api/status/${i.mail}`)
             .then( async (res) => { // Fix occurred here
                let mails = [].concat(res.data)
                await this.setState({
                  mails: mails
             })
          })
          .catch(err => console.log(err))
        })
      }))
         .catch(err => console.log(err))
     }

Upvotes: 1

Related Questions