How to fetch the Promise object value from an array and use it

Question

I have two fetch requests inside the Promise. all function. I want to return a value like that

[
    {
        "name": "Yakup Kadri Karaosmanoğlu - Yaban.epub",
        "size": "217.5 KB",
        "date": "1/20/2021",
        "file": 'https://downloader.disk.yandex.ru/disk/ce4f0f5dce9c2b6475781cbb7df75fea0481e7154ba85ce458033babd45495bf/6161d2f8/Ojziu5Rkr3AlWOVIZvGJOuXWYQW2P8eZG0HUnfsnfkICk3YeJxoR5hpLAKFB6qGXoCQg004QfeWGolpZpYWxRg%3D%3D?uid=0&filename=Yakup%20Kadri%20Karaosmano%C4%9Flu%20-%20Yaban.epub&disposition=attachment&hash=I9yUHj%2BS67IaRxOANlGbhkKhx%2BMb83KCZa7A9q6PB7NuJBmsS3ntyZUZhtgmzgqmq/J6bpmRyOJonT3VoXnDag%3D%3D%3A/Meritokrasi/T%C3%BCrk%C3%A7e%20%5BePub%5D/Derecelendirilmi%C5%9F%20Kitaplar/Yakup%20Kadri%20Karaosmano%C4%9Flu%20-%20Yaban.epub&limit=0&content_type=application%2Fepub%2Bzip&owner_uid=1327282368&fsize=222724&hid=b47e4a1a2473bb99d2236114f54eeb94&media_type=book&tknv=v2'
    }
]

But my code turn me into an array like that

[
    {
        "name": "Yakup Kadri Karaosmanoğlu - Yaban.epub",
        "size": "217.5 KB",
        "date": "1/20/2021",
        "file": Promise{<fulfilled>'https://downloader.disk.yandex.ru/disk/ce4f0f5dce9c2b6475781cbb7df75fea0481e7154ba85ce458033babd45495bf/6161d2f8/Ojziu5Rkr3AlWOVIZvGJOuXWYQW2P8eZG0HUnfsnfkICk3YeJxoR5hpLAKFB6qGXoCQg004QfeWGolpZpYWxRg%3D%3D?uid=0&filename=Yakup%20Kadri%20Karaosmano%C4%9Flu%20-%20Yaban.epub&disposition=attachment&hash=I9yUHj%2BS67IaRxOANlGbhkKhx%2BMb83KCZa7A9q6PB7NuJBmsS3ntyZUZhtgmzgqmq/J6bpmRyOJonT3VoXnDag%3D%3D%3A/Meritokrasi/T%C3%BCrk%C3%A7e%20%5BePub%5D/Derecelendirilmi%C5%9F%20Kitaplar/Yakup%20Kadri%20Karaosmano%C4%9Flu%20-%20Yaban.epub&limit=0&content_type=application%2Fepub%2Bzip&owner_uid=1327282368&fsize=222724&hid=b47e4a1a2473bb99d2236114f54eeb94&media_type=book&tknv=v2'}
    }
]

My problem is I can't use the file link inside the promise. Here also I want to put the async call that I use to make some calls.

  fetch(`/books/${search}`)
      .then((res) => res.json())
      .then(async (d) => {
        const withChildren = d.map((e) => {
          return {
            name: e.name,
            size: bytes2Size(e.size),
            date: new Date(e.date).toLocaleDateString(),
            file: fetch(
              `https://cloud-api.yandex.net:443/v1/disk/public/resources/download?public_key=${encodeURI(
                'https://disk.yandex.ru/d/o9lNK0tpVCH7sQ'
              )}&path=${encodeURI(e.path)}`
            )
              .then((res) => res.json())
              .then(async (res) => res.href),
          };
        });
        await Promise.all(withChildren).then((res) => {
          setBooks(res);
          setIsLoaded(true);
        });

Is there any way to get rid of the Promise object and take only downloading link inside the array?

Invizi · Accepted Answer · 2021-10-09 14:08:02Z

2

Reorder your promises to make requests first, then make the objects.

That makes sure you have all the data before returning the object, so you don't have any pending promises.

fetch(`/books/${search}`)
  .then((res) => res.json())
  .then((d) => {
    Promise.all(d.map((e) => {
        return fetch(`https://cloud-api.yandex.net:443/v1/disk/public/resources/download?public_key=${encodeURI(
                'https://disk.yandex.ru/d/o9lNK0tpVCH7sQ'
              )}&path=${encodeURI(e.path)}`)
          .then(res => res.json())
          .then(res => {
              return {
                name: e.name,
                size: bytes2Size(e.size),
                date: new Date(e.date).toLocaleDateString(),
                file: res.href;
              })
          };
      }))
      .then(data => {
        setBooks(data);
        setIsLoaded(true);
      });
  });

edited Oct 9, 2021 at 14:08

answered Oct 9, 2021 at 13:58

Invizi

1,2881 gold badge8 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sayinmehmet47 Over a year ago

setBooks(data) and with one semicolon error fixed then it worked :)

Invizi Over a year ago

Thanks, I couldn't run it to debug, since the first request is relative.

Collectives™ on Stack Overflow

How to fetch the Promise object value from an array and use it

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related