多个嵌套的 axios 调用未按预期解决

Question

正如我的代码 sn-p 之间的 cmets 中所述，异步未按预期工作。对于每个id，应该返回一个对象/项目，但它只返回一个项目，因为我的async await 没有正确实现。有什么可能的解决方法？

提前致谢

useEffect(() => {
    axios.get('url-here').then((res) => {
      res.data.favProperties?.map((el) => {
        console.log(el) // this returns multitple id's of saved/liked items
        axios.get('url-here').then(async (r) => {
          if (r.data) {
            console.log(r.data) // Problem starts here
            // This returns the full object of the liked items
            // But only one object is returned, not every object for which an id was stored
            await storageRef
              .child(r.data.firebaseRef + '/' + r.data.images[0])
              .getDownloadURL()
              .then((url) => {
                // Here i need to fetch the image for each object
                console.log(url)
              })
              .catch((err) => console.log(err))
          }
        })
      })
    })
  }, [])

Answer 1

我认为将您的操作分解为函数可以防止这种 Promise Hell。我建议使用 async await 进行这些操作。此外，我对控制台记录下载 URL 的最后一部分感到困惑，我猜您正在尝试将这些 喜欢的项目 的所有 下载 URL 保存在一个数组中。

    useEffect(() => {
      firstFunction();
    }, []);

    const firstFunction = async () => {
    const { data } = await axios.get("url-here");
    const favProperties = data.favProperties;
    const fetchedUrls = await Promise.all(
        favProperties?.map(async (el) => (
          await secondFunction(el.id) /** use el to pass some ID */
        ))
      );
    };
  
    const secondFunction = async (someId) => {
      /** your second URL must point to some ID (or some parameters) specific API otherwise
 running same op in a loop without variations doesn't make any sense */
      const { data } = await axios.get(`some-other-url/${someId}`);
      if (data) {
        console.log(data);
        const fetchedUrl = await storageThing(data);
        return fetchedUrl;
      }
    };
    
    const storageThing = async ({ firebaseRef, images }) => {
      try {
        const downloadURL = await storageRef
          .child(firebaseRef + "/" + images[0])
          .getDownloadURL();
        console.log(downloadURL);
         return downloadURL;
       } catch (error) {
         console.log(error);
         return '';
       }
     };