javascript - 当存档未定义时不要包含在 promise 中

Question

我有这段代码来验证文件是否未定义，但通过这种方式我只是验证所有文件是否未定义，我想验证每个文件是否未定义。

var render_archive1 = jQuery('#archive-pratica1')[0].files[0];
var render_archive2 = jQuery('#archive-pratica2')[0].files[0];
var render_archive3 = jQuery('#archive-pratica3')[0].files[0];
var render_archive4 = jQuery('#archive-pratica4')[0].files[0];


if (render_archive1 !== undefined && render_archive2 !== undefined && render_archive3 !== undefined && render_archive4 !== undefined) {
    // wait till file gets encoded
    Promise.all([getBase64(render_archive1), getBase64(render_archive2), getBase64(render_archive3), getBase64(render_archive4)]).then(([data, data1, data2, data3]) => {
        // push file data
        form.push({'name': 'archive_pratica1', 'value': data});
        form.push({'name': 'archive_pratica2', 'value': data1});
        form.push({'name': 'archive_pratica3', 'value': data2});
        form.push({'name': 'archive_pratica4', 'value': data3});

        // send request
        jQuery.ajax ({
            type: "POST",
            data: {
                action: 'sendEditInfo',
                form: form
            },
            url: '../wp-admin/admin-ajax.php'
        })

        .then((res) => {

        }, err => {

        });
    })
}

当文件未定义时，我无法发送 ajax 请求，因为 ir 在 getBase64 函数中返回错误。因此，我需要创建一个 if 来验证每个未定义的时间。

函数getBase64

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

Answer 1

您可以进行此重构以归档此任务:

function readArchive(archiveId) {
  var renderArchive = jQuery(`#${archiveId}`)[0].files[0];
  if (renderArchive) {
    return getBase64(renderArchive)
      .then(data => ({ name: archiveId, data }));
  }
  return Promise.resolve(null);
}

Promise.all([
  readArchive('archive-pratica1'),
  readArchive('archive-pratica2'),
  readArchive('archive-pratica3'),
  readArchive('archive-pratica4'),
])
  .then((archives) => {
    archives
      .filter(_ => _ !== null)
      .forEach(_ => form.push({ 'name': _.name, 'value': _.data }));

    // send request
    jQuery.ajax({
      type: "POST",
      data: {
        action: 'sendEditInfo',
        form: form
      },
      url: '../wp-admin/admin-ajax.php'
    })
  })
  .catch((err) => {
    // do something
  });