0

In javascript async await function we can write something like this:

const campaigns = await this.$api.campaigns.getCampaigns({all});
const campaigns2 = await this.$api.campaigns.getCampaigns({all});
const campaigns3 = await this.$api.campaigns.getCampaigns({all});

It causes that campaigns2 and campaigns3 will wait for the end of first request. In javascript there should be also possible something like this:

const campaigns = this.$api.campaigns.getCampaigns({all});
const campaigns2 = this.$api.campaigns.getCampaigns({all});
const campaigns3 = this.$api.campaigns.getCampaigns({all});

await campaigns;
await campaigns2;
await campaigns3;

this.campaigns = campaigns3.data.data;

This code should make 3 paralel requests for campaigns1,2,3 variables where campaigns2 and campaigns3 dont have to wait for the end of promisse of first request is done. It is possible but in Vue 2 it does not work. It throws me an error:

TypeError: Cannot read properties of undefined (reading 'data')

Can somebody tell me please why? Thank you.

roapp
  • 530
  • 6
  • 17
Čamo
  • 3,863
  • 13
  • 62
  • 114
  • 2
    Are you looking to use something like Promise.all? I don‘t know what the api is sending back but you need to call .json() on the response also – dbzx10299 Jun 05 '23 at 12:28
  • Does this answer your question? [Call async/await functions in parallel](https://stackoverflow.com/questions/35612428/call-async-await-functions-in-parallel) – Moritz Ringler Jun 05 '23 at 12:29
  • This is really valid javascript syntax. But it does not work in Vue 2. – Čamo Jun 05 '23 at 12:31
  • 2
    `campaigns3` is a promise, and will always be a promise. So when you want the resolved values you need `await`,. `this.campaigns = (await campaigns3).data.data;` But like pointed out, `Promise.all` would be a better fit for parallel Promises anyway. – Keith Jun 05 '23 at 12:34
  • 1
    It doesnt have to do with vue2, at the time you try to get data, campaigns.data is still undefined. You might need to call .json() on it first – dbzx10299 Jun 05 '23 at 12:36
  • 1
    [Do not use the second pattern!](https://stackoverflow.com/q/46889290/1048572) Use `Promise.all` instead if you want to wait for multiple things at once – Bergi Jun 05 '23 at 13:06
  • Ok so I will use Promise.all(). It seems to work. – Čamo Jun 05 '23 at 13:23

1 Answers1

0

The statement

await campaigns;

will indeed wait for the Promise to resolve, but the statement makes no change to the value of campaigns. It remains the Promise object, not whatever it is you want back from the API - the promise does not have a .data property.

If you want the value, you have to both await the promise completion and save the promise result somewhere:

let c = await campaigns;

Then use c.data.….

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • No there should be a value. – Čamo Jun 05 '23 at 12:54
  • @Čamo have you tried it? There *is* a value, but `campaigns` will still be the Promise object. Some code in your API will pass a value to `resolve()`, but if you don't save that value somewhere, it's gone. It's like having a `.then()` callback that ignores its parameter. – Pointy Jun 05 '23 at 13:03
  • It seems you are right. Then better way is to use Promise.all(). Thanks you. – Čamo Jun 05 '23 at 13:17