async Pinia Store, Chain Results like promise.all

hello , I used to work with promises , now I am trying to use async in Pinia. I have this promise in a Page in VUE - That I want to get those results like a "Chain Result", like this -

 Promise.all([
    myStore.loadOne,
     myStore.loadTwo
  ]).then((data) => {
    console.log(data)
})

then in Pinia with Promisse -

  loadOne() {
    return new Promise((resolve, reject) => {
      axios.get(this.pageInfo.LOAD_ONE_URL)
        .then(response => {
          resolve(response.data)
        }).catch(error => {
        console.log(error)
        reject(error)
      })
    })
  }

Result -

["{response one}", "{response two}"]
After that I will load more results ....

OK, this is workig, But if I want to do it with Async , I wold do like this -

 Promise.all([
    myStore.loadOne,
     myStore.loadTwo
  ]).then((data) => {
    console.log(data)
})

then in Pinia with Async -

async  loadOne() {
    try {
      axios.get(this.pageInfo.LOAD_ONE_URL)
        .then(response => {  return response.data     })
    } catch (error) {
      console.log(error)
      return error
    }
  },

Result -

[null, null]

It loads the result , but it does not wait to load one result to load other one .

lbecket

3 years ago

Level 39

In your loadOne method, you are not waiting for the axios request to finish before returning. Try adding await:

async loadOne() {
  try {
    const response = await axios.get(this.pageInfo.LOAD_ONE_URL);
    return response.data;
  } catch (error) {
    console.log(error);
    return error;
  }
},

By returning the result of response.data inside the try block, the resolved value of the promise returned by loadOne will be the response data.

Using async/await in this way should ensure that Promise.all() waits for both loadOne and loadTwo to resolve before logging the results.

Please or to participate in this conversation.