Электрон с Vue, как синхронизировать c отображение изображений после сохранения их в папке пользовательских данных

Question

мой первый пост здесь :)

Я работаю над приложением Electron с Vue, и у меня возникла проблема с отображением фотографий на передней панели Vue. Я работаю с Vue почти год, но это мой первый подход к Node.js и Electron.

Мое приложение управляется дистанционно с помощью пользовательской CMS. У меня есть JSON файл с различными типами данных внутри, некоторые текстовые, изображения, видео и c. Каждые 5 секунд я извлекаю данные из CMS для поиска изменений в структуре, например, если появляется новое изображение, я загружаю его по предоставленной ссылке в файле JSON, сохраняю локально в AppData и затем отображаю в приложениях. фронт. И тут возникает проблема:

Каждый раз, когда я загружаю новую фотографию, ссылка на локальные данные передается на фронт быстрее, чем хранится в файлах. Это приводит к тому, что в приложении отображается «испорченное изображение», и всякий раз, когда я обновляю приложение своей функцией помощи, изображение отображается качественно. Но я чувствую, что это какой-то хак, а не ожидаемое поведение.

Итак, я получаю данные каждые 5 секунд c с помощью IpcMain следующим образом:

ipcMain.on("get-content", (event, arg) => {
  getContent()
    .then(response => {
      const downloadedContent = Buffer.from(JSON.stringify(response.data));
      new Promise((resolve, reject) => {
        fs.readFile(path.resolve(`${app.getPath("userData")}/content.json`), (err, data) => {
          if (checksum(downloadedContent) !== checksum(data)) {
            resolve(true);
           // Here i'm checking, if the content checksum has changed //
          }
          if (err) {
            console.log(err);
            reject(err);
          }
        });
      }).then(data => {
          downloadContent(response.data, event);
          // Here i'm sending to next helper function ///
      })
    })

Вспомогательная функция, которая поддерживает все хранилища данных:

const downloadContent = (response, event) => {
  let location = path.resolve(`${app.getPath("userData")}/content.json`);
  let content = JSON.stringify(response);
  fs.writeFile(location, content, err => {
    if (err) throw err;
  });
// Write content.json to AppData user files //
  response.forEach(element => {
    if (element.type === "image") {
      let fileLocation = path.resolve(`${userDataPath}/img/${element.hash[0]}.jpeg`);
          if (!fs.existsSync(fileLocation)) {
            const file = fs.createWriteStream(fileLocation);
              http.get(element.translations, image => {
                image.pipe(file);
                file.on('finish', function () {
                  file.close(() => {
                    event.reply("get-content", response);
                    // Here i'm sending the IpcMain response with the new link to image, which is stored in AppData ///
                  });
                });
              })
          }

Всякий раз, когда я делаю event.reply ("get-content", response); отправляется быстрее, чем файл сохраняется в пользовательских данных. Но, согласно документации, 'fini sh' - последний вызов, поэтому он должен сработать после сохранения данных. Я прав? И чтобы быть ясным, в forEach У меня есть много различных объектов данных, но я храню одно изображение во время.

Как сделать этот вызов хотя бы «любопытным» сычем для получения данных из IpcMain после сохранения изображения? Я пробовал Promise.all, async / await, но ничего не помогло.

Если вам нужен больше кода или данных, не стесняйтесь спрашивать, я сделаю все возможное, чтобы предоставить больше информации.

Заранее спасибо!