一旦图像可用就动态加载图像答案

【问题标题】：Loading an image dynamically once it's available一旦图像可用就动态加载图像
【发布时间】：2018-10-15 23:39:15
【问题描述】：

好的，情况就是这样。我有一个网站，用户可以在其中创建新闻提要故事。该故事向服务发送请求，该服务拍摄照片并将其保存到 S3。在将图片保存到 S3 之前，用户会看到他们的新闻提要故事是使用损坏的图像链接创建的。

是否有可能知道该图像何时保存到 S3，然后只需更新 UI 以显示现在呈现的图像，而无需用户刷新页面，或者无需不断发送请求以检查图像是否可用？

【问题讨论】：

我建议反其道而行之，使用 fileReader 之类的东西在新闻提要故事中显示图片，然后发送请求以将图片实际保存到 S3。
问题是生成图片需要一分钟，所以无论哪种方式，我都需要更新 UI，因为在它呈现给用户之后。
这里有一些基本障碍需要克服，因为对 S3 的请求无法等待对象的创建，事实上，在创建对象之前向 S3 请求对象实际上可以延迟该对象的可用性，通过触发 S3 中的瞬态内部状态，导致 S3 得出结论，因为它已经验证该对象不存在，它可能会在该对象之后的短时间内继续返回 404 或 403被建造。您能否更具体地说明在对象可用之前通常经过多长时间以及延迟的原因？
@Michael-sqlbot 该服务正在截取由 Cesium.js 创建的 WebGL 地图的屏幕截图，可能需要一段时间才能完全加载。录制和保存屏幕截图最多可能需要 30 秒。从第一个答案和进一步考虑，我认为我需要等待 S3 的响应，然后向我的主服务发送通知以获取图像。

【解决方案1】：

是的，你有很多方法可以做到这一点，你可以使用 Promises 来存档，Promises 让你运行异步代码。在您向服务器请求图像时，您仍然没有它来显示它，您需要一些时间，您可以做这样的事情（我不知道您使用什么来访问服务器，但我给了您axios 的示例：

因为axios通过defa返回一个promise

function reachServer() {
  return axios.get('url');
}

function loadImage() {
  Promise.resolve(reachServer())
    .then((image) => {
      //got the image
      myImage = image;
    })
    .catch(() => {
     // a error ocurred loading
    })
}

这是一个关于如何存档的简单案例，你还有很多其他的，你可以使用 image.onload，或者 ES6 的 async/await，我认为 Promises 和 async/await 是最好的选择。

希望对你有帮助

【讨论】：

所以使用这样的方法，当我执行 get 时会发生什么，它返回 404，因为图片还不存在？我需要继续努力吗？
我对 S3 不太了解，但是保证你可以知道图像何时保存，服务器应该在响应成功时向你发送响应（意味着图像是保存在服务器端）您可以获取它，无需执行多个获取请求
哦。我明白你在说什么。所以等待 S3 的响应，然后发送消息，然后更新 UI。好的。我要去尝试一些东西然后回来。
是的，你知道图像到达服务器的唯一方法是从服务器获得响应成功，之后图像应该像我展示的那样异步加载。任何疑问都可以要求它:)