Javascript 如何捕获在useEffect钩子中抛出的错误？

在这个程序中，用户可以上传保存到服务器的配置文件pic，并将其保存在本地存储器中。我将其保存在本地存储中，这样用户在切换选项卡时就不必总是下载图像。例如，如果他们从“主页”选项卡转到“配置文件”选项卡，再从“主页”选项卡转到“配置文件”选项卡，他们将下载相同的图像两次，即每次访问“配置文件”选项卡

在他们第一次下载图像后，我通过将图像保存到本地存储来解决这个问题。现在，如果他们再次执行上述场景，它将只下载一次图像，然后每次从本地存储中获取图像，直到他们关闭网站。我的问题是，我无法理解如何先检查映像是否存储在本地，如果没有，然后从服务器下载映像并将其保存到本地存储

我试着做下面的事情，但它一直抛出一个错误，即使有一个捕捉块。此try catch位于useffect（）挂钩中

我还尝试检查localStorage是否为null，然后使用localStorage中的映像。但是，当用户刷新页面时，blob的值会更改，并且无法正确加载图像。这是代码

        if(localStorage.getItem('image') !== null){
          setProfilePic(localStorage.getItem('image'));
        }
        else{
          downloadProfilePic();
        }

---

非常感谢您的帮助。

如果我是您，请不要尝试使用JavaScript优化。相反，让浏览器来处理它——浏览器非常擅长处理和优化这些类型的重复请求

首先，确保您的服务器具有合理的缓存策略—例如，确保所服务的图像的头在缓存中保留一段时间。然后，您所需要做的就是呈现相同的图像链接，该图像将被下载一次，直到缓存过期

如果用户在一个选项卡上访问一个页面，然后打开另一个选项卡，指向一个类似的页面，并带有指向该图像的另一个链接，则浏览器不会重新下载该图像，而是将已下载的图像呈现在其缓存中

所以，你真正需要的是

<img src={profilePicSrc} />

---

并确保

profilePicSrc

在页面加载/选项卡之间没有差异（除非用户通过更改其配置文件pic来引起更改）。

我该如何着手执行您在第二段中提到的内容。我正在使用firebase存储和它的本机方法。所以没有快递或者类似的东西。这就是我将图像上传到服务器的方式，以防它会帮助``firebase.storage（）.ref（'users/'+user.uid+'/profile.jpg'）.put（图像）。然后（（）=>{console.log（“成功上传图像”）}）。catch（错误=>{console.log（“错误上传图像：+error”）；）```请看，它说任何请求的静态内容都会自动缓存在CDN上，因此您可能根本不需要做任何事情。默认情况下，大多数页面都有不错的缓存策略，因此，如果已经正确实现，也就不足为奇了。谢谢！我现在要做更多的研究，再次感谢！嘿，我刚意识到一些事。我想我并没有像以前想的那样下载图片。我使用这个方法获取imageURL，然后将配置文件pic设置为它。我只是想确保我是正确的，我没有下载图像。firebase.storage（）.ref（'users/'+user.uid+'/profile.jpg'）。getDownloadURL（）是的，99%的情况下，您将下载并呈现一个链接，而不是实际的图像块

getDownloadURL

听起来像是给了你链接，而不是blob。

<img src={profilePicSrc} />