首页 > 解决方案 > 如何从数组中获取 Promise 对象值并使用它

问题描述

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

[
    {
        "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 对象并只在数组内获取下载链接?

标签: javascriptreactjsfetch-api

解决方案


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

这样可以确保在返回对象之前拥有所有数据,因此您没有任何未决的承诺。

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


推荐阅读