如何从数组中获取 Promise 对象值并使用它答案

【问题标题】：How to fetch the Promise object value from an array and use it如何从数组中获取 Promise 对象值并使用它
【发布时间】：2021-10-09 22:08:02
【问题描述】：

我在 Promise 中有两个 fetch 请求。所有功能。我想返回这样的值

[
    {
        "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'
    }
]

但是我的代码把我变成了这样的数组

[
    {
        "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'}
    }
]

我的问题是我不能使用承诺中的文件链接。我还想在这里放置我用来进行一些调用的异步调用。

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

有什么办法可以去掉 Promise 对象，只取数组内的下载链接？

【问题讨论】：

标签： javascript reactjs fetch-api

【解决方案1】：

重新排序你的承诺，先提出请求，然后再提出对象。

这确保您在返回对象之前拥有所有数据，因此您没有任何待处理的承诺。

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

【讨论】：

setBooks(data) 并修复了一个分号错误然后它起作用了:)
谢谢，我无法运行它来调试，因为第一个请求是相对的。