Динамическая загрузка изображения после его доступности

Question

Хорошо, вот ситуация. У меня есть веб-сайт, где пользователь может создать историю новостей. Эта история отправляет запрос в службу, которая делает снимок и сохраняет его на S3. Перед сохранением изображения на S3 пользователь видит, что его новостная лента создается с неработающей ссылкой на изображение.

Можно ли узнать, когда это изображение сохранено на S3, а затем просто обновить пользовательский интерфейс, чтобы показать текущее изображение, без необходимости обновления страницы пользователем или без постоянной отправки запросов на проверку наличия изображения?

Answer 1

Да, у вас есть много способов сделать это, вы можете использовать Promises для архивирования этого, Promises позволяет запускать асинхронный код. В то время, когда вы запрашиваете у сервера изображение, которое у вас все еще не отображается, вам нужно время, вы можете сделать что-то вроде этого (я не знаю, что вы используете для доступа к серверу, но я даю вам пример с axios:

поскольку axios возвращает обещание по умолчанию

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 или async / await с ES6, я думаю, что Promises и async / await - лучшие варианты.

Надеюсь, это поможет