-1

I have the following code:

const response = Promise.all([
    await fetch(`http://${location.hostname}${this.config.baseName}/data.php`),
    await fetch(`http://${location.hostname}${this.config.baseName}/data.php?a=3423`)
    ]);
const body = JSON.parse(await response.[[PromiseValue]][1].text());

I know the last line's response.[[PromiseValue]] is not the proper syntax. But when I look in Chrome developer tools, I see that [[PromiseValue]] is the property name.

enter image description here

How do I reference the second element of the promise value array?

EDIT I don't believe my question is related to What is the significance of the double brackets for the [[prototype]] property in JavaScript?

I'm asking about HOW to reference the results of a Promise.All. I'm not asking about the significance of double square brackets.

John
  • 32,403
  • 80
  • 251
  • 422
  • This seems weird... What are you trying to do exactly? Why use `await` there I don't understand... – elclanrs Dec 28 '17 at 00:30
  • Try logging `Promise.resolve("anything")` and compare the two. – pishpish Dec 28 '17 at 00:31
  • What about: `(await response)[1].text()`? – Luan Nico Dec 28 '17 at 00:31
  • 1
    `[[PromiseValue]]` is not a real property, and you can't get it. Instead, await the promise to get the value. – SLaks Dec 28 '17 at 00:32
  • 2
    Passing `await` to `Promise.all()` makes no sense. You need to learn what `await` actually does. – SLaks Dec 28 '17 at 00:33
  • 2
    do you need to wait for the first fetch to finish before starting the second fetch? I see most of the answers (except one so far) assume you can make those requests in "parallel" – Jaromanda X Dec 28 '17 at 00:41
  • @msanford Thanks for your suggestion, but I explain in my question taht I don't care what hte double brackets mean. I only care about the exact sequence of keyboard characters I must type to get a handle on the results of a Promise.All – John Dec 28 '17 at 03:42

2 Answers2

3

A few things. First, there is no need to await the arguments to Promise.all, since the overall promise will be waiting for them anyway. You can, but it's redundant.

Second, Promise.all returns a promise that resolves with an array of the resolved values of it's argument. So your Promise.all in this case will return a promise for an array containing two Response objects. That means you should await the overall Promise.all and not it's arguments.

Finally, there is a .json() method available on the response, so you don't have to manually use JSON.parse if you don't want to. So:

// response will be an array: [resp1, resp2].
const response = await Promise.all([
    fetch(`http://${location.hostname}${this.config.baseName}/data.php`),
    fetch(`http://${location.hostname}${this.config.baseName}/data.php?a=3423`)
]);
const body = await response[1].json();

Would suffice. You can also take advantage of some destructuring if you like. So this would work also:

const [response1, response2] = await Promise.all([
    fetch(`http://${location.hostname}${this.config.baseName}/data.php`),
    fetch(`http://${location.hostname}${this.config.baseName}/data.php?a=3423`)
]);
const body = await response2.json();
CRice
  • 29,968
  • 4
  • 57
  • 70
  • 2
    There is a difference if they `await fetch()`. That will force the `fetch()` calls to be sequential, not run in parallel. And, if they are run sequential, then there is no need for `Promise.all()` at all. It is not clear here what the OP actually wants. – jfriend00 Dec 28 '17 at 01:12
1

ES6 provides interesting way of doing this.

To target the second element, try something like:

const [first, second]= await Promise.all([
  fetch(`http://${location.hostname}${this.config.baseName}/data.php`),
  fetch(`http://${location.hostname}${this.config.baseName}/data.php?a=3423`)
    ]);

const body = JSON.parse(await second.text());
Tareq
  • 5,283
  • 2
  • 15
  • 18