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

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==?uid=0&filename=Yakup Kadri Karaosmanoğlu - Yaban.epub&disposition=attachment&hash=I9yUHj+S67IaRxOANlGbhkKhx+Mb83KCZa7A9q6PB7NuJBmsS3ntyZUZhtgmzgqmq/J6bpmRyOJonT3VoXnDag==:/Meritokrasi/Türkçe [ePub]/Derecelendirilmiş Kitaplar/Yakup Kadri Karaosmanoğlu - Yaban.epub&limit=0&content_type=application/epub+zip&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==?uid=0&filename=Yakup Kadri Karaosmanoğlu - Yaban.epub&disposition=attachment&hash=I9yUHj+S67IaRxOANlGbhkKhx+Mb83KCZa7A9q6PB7NuJBmsS3ntyZUZhtgmzgqmq/J6bpmRyOJonT3VoXnDag==:/Meritokrasi/Türkçe [ePub]/Derecelendirilmiş Kitaplar/Yakup Kadri Karaosmanoğlu - Yaban.epub&limit=0&content_type=application/epub+zip&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?

CodePudding user response：

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