CODEWITHSUNDEEP
node.jsvue.js
Houshman85
Houshman85

Reputation: 72

Trouble with Promise and Async functions

I am trying to use promises and async functions to send chunks of an array to an api call that inserts them into a DB. I am trying to get the top function to chunk the array and await for the backend to finsih then it will move on to the next chunk. It errors out after the first iteration. Any ideas??

async chunkArray(arr) {
   let len = arr.length
   let update_arr
   let i = 1
   for(i; i<=len; i++) {
     if((i%125) === 0) {
       update_arr = arr.slice(i-125,i)

       await this.updateChuckArray(update_arr)
     } else if(i === len) {
       let div = (Math.floor(len/125) * 125)
       update_arr = arr.slice(div, len)

       await this.updateChuckArray(update_arr)
     }
   }
},

updateChuckArray(update) {
  return new Promise(resolve => {
    this.$http.put(`/route`, update).then(res => {
      res.data.error ? this.$root.updateError(res.data.error) : this.$root.updateSuccess(res.data.message)
    }).catch(error => {
        this.$root.updateError(res.data.error)
      })
  })
}

Upvotes: 0

Views: 32

Answers (1)

jfriend00
jfriend00

Reputation: 707796

First off your updateChuckArray() never resolves the promise it returns (you never call resolve()).

Instead of manually wrapping a new promise around your function call (that is a promise anti-pattern), you can just return the promise you already have and write it like this:

updateChuckArray(update) {
    return this.$http.put(`/route`, update).then(res => {
      res.data.error ? this.$root.updateError(res.data.error) : this.$root.updateSuccess(res.data.message);
    }).catch(error => {
        this.$root.updateError(error);
    })
}

FYI, it's unclear what your error handling strategy is. The way you wrote the code (which is followed above), you catch an error from this.$http.put() and handle it and let the loop continue. If that's what you want, this will work. If you want the for loop to abort on error, then you need to rethrow the error in the .catch() handler so the error gets back to the await.

Also, not that in your .catch() handler, you were doing this:

this.$root.updateError(res.data.error)

but there is no res defined there. The error is in error. You would need to use that in order to report the error. I'm not sure what the structure of the error object is here or what exactly you pass to $.root.updateError(), but it must be something that comes from the error object, not an object named res.

Upvotes: 1

Related Questions