How to get information when doing promises?

I'm not very familiar with promises, but I have something like this:

  const plugins = [
    {
      name: "Swiper",
      slug: "swiper",
      urls: [
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js",
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css",
      ],
    },
    {
      name: "Gsap",
      slug: "gsap",
      urls: ["https://cdn.jsdelivr.net/npm/gsap/dist/gsap.min.js"],
    },
    {
      name: "Lenis",
      slug: "lenis",
      urls: ["https://unpkg.com/lenis/dist/lenis.min.js"],
    },
  ];
  const urls = plugins.flatMap((e) => e.urls);
  const promises = urls.map((url) => fetch(url));
  const responses = await Promise.all(promises);
  const results = await Promise.all(
    responses.map((res) => {
      if (res.status === 200) return res.text();
      return "ERROR";
    }),
  );
  console.log(results);

  const plugins = [
    {
      name: "Swiper",
      slug: "swiper",
      urls: [
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js",
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css",
      ],
    },
    {
      name: "Gsap",
      slug: "gsap",
      urls: ["https://cdn.jsdelivr.net/npm/gsap/dist/gsap.min.js"],
    },
    {
      name: "Lenis",
      slug: "lenis",
      urls: ["https://unpkg.com/lenis/dist/lenis.min.js"],
    },
  ];
  const urls = plugins.flatMap((e) => e.urls);
  const promises = urls.map((url) => fetch(url));
  const responses = await Promise.all(promises);
  const results = await Promise.all(
    responses.map((res) => {
      if (res.status === 200) return res.text();
      return "ERROR";
    }),
  );
  console.log(results);

This works fine and gets all the plugins, the problem is that I don't know which res.text() belongs to who, Ideally I'd get something like:

const results = [
  {
  text: "...",
  name: "...",
  ...
  }
]

const results = [
  {
  text: "...",
  name: "...",
  ...
  }
]

8 Replies

MarkBoots•2mo ago

maybe this might do it for you?

  const data = plugins.reduce((arr, { name, urls }) => {
    urls.forEach(url => arr.push({ name, url }))
    return arr;
  }, [])

  const results = await Promise.all(data.map(async ({name, url}) => {
    const response = await fetch(url);
    const text = await response.text();
    return { name, text }
  }))

  console.log(results)

  const data = plugins.reduce((arr, { name, urls }) => {
    urls.forEach(url => arr.push({ name, url }))
    return arr;
  }, [])

  const results = await Promise.all(data.map(async ({name, url}) => {
    const response = await fetch(url);
    const text = await response.text();
    return { name, text }
  }))

  console.log(results)

clevermissfox•2mo ago

How are you able to do this, use the await keyword without being inside an async function ?

const results = await Promise.all(….)

const results = await Promise.all(….)

I can understand why const response and const text can use await since async was declared on the data.map but up a level for the const results I would’ve thought js would yell at me that I cant use await without an async keyword

Jochem•2mo ago

at a guess, he wrapped the whole lot in an async function:

(async () => {
  const data = plugins.reduce((arr, { name, urls }) => {
    urls.forEach(url => arr.push({ name, url }))
    return arr;
  }, [])

  const results = await Promise.all(data.map(async ({name, url}) => {
    const response = await fetch(url);
    const text = await response.text();
    return { name, text }
  }))

  console.log(results)
})();

(async () => {
  const data = plugins.reduce((arr, { name, urls }) => {
    urls.forEach(url => arr.push({ name, url }))
    return arr;
  }, [])

  const results = await Promise.all(data.map(async ({name, url}) => {
    const response = await fetch(url);
    const text = await response.text();
    return { name, text }
  }))

  console.log(results)
})();

it's a bit of a cheat for getting "top-level" await (massive, massive air quotes there)

clevermissfox•2mo ago

Okay I thought perhaps that was the case but just wanted to check I wasn’t missing out on something important Just was confused by the plugins array being in the same block

MarkBoots•2mo ago

yep this, OP didnt provide that bit.

Jochem•2mo ago

for OP it could techniically also be nodejs now, right? I think they support toplevel await now?

MarkBoots•2mo ago

yea indeed

clevermissfox•2mo ago

Woah really ? As of version 14.8 apparently! Wow! Very good information to know ! I could’ve sworn I just got a warning about an await keyword without an async function recently in a node project which was definitely running latest node , maybe type module wasn’t set in package.json . Thanks for the tip!

However, it is only available in ES modules, which means you need to use the .mjs file extension or set "type": "module" in your package.json

Gaming

Programming

How to get information when doing promises?