CODEWITHSUNDEEP
javascriptreactjsfetch-api
sayinmehmet47
sayinmehmet47

Reputation: 551

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

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?

Upvotes: 0

Views: 191

Answers (1)

Invizi
Invizi

Reputation: 1298

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);
      });
  });

Upvotes: 2

Related Questions