Правильная обработка отклонения вложенного обещания

Question

Я пытаюсь сначала получить файл из ввода, затем прочитать файл с помощью средства чтения файлов, а затем получить высоту и ширину изображения, если это действительный файл изображения.

Из imageProcess он показывает ошибка из-за отклонения обещания для недопустимого типа файла. Меня беспокоит то, что я хочу отклонить и от readerProcess, когда imageProcess отклоняет. Здесь я не могу отказаться от readerProcess, потому что я ловлю imageProcess, чтобы разрешить readerProcess.

  const target = e.target.name;


  readerProcess(file)
    .then(res => {console.log('reader resuld', res)},
      err => {console.log('error')}
    )

const readerProcess = (file) => {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    if(file) reader.readAsDataURL(file);
    reader.onload = () => resolve(imageProcess(reader)
      .then(image => {
          return {
            data: reader.result,
            width: image.width,
            height: image.height
          }
        },
        err => reject //i want to reject from here too but catching it from resolve, so it is not rejecting
      ))

  })
}

const imageProcess = (reader) => {
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.onload = () => resolve(img)
    img.onerror = reject // first reject from here
    img.src = reader.result
  })
}```

Answer 1

Я бы немного упростил, имея функцию, единственная задача которой - поместить обертку обещания вокруг readFileAsDataURL:

// Promise wrapper for FileReader.prototype.readFileAsDataURL
const readFileAsDataURL(file) {
  return new Promise((resolve, reject) => {
    if (!file) {
      throw new Error("No file given");
    }
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file); // Note: Do this after attaching the handlers, not before
  });
};

Я бы также изменил imageProcess, чтобы принять src вместо FileReader:

const imageProcess = (src) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
};

Тогда ваша readerProcess функция просто объединяет обещания вместе:

const readerProcess = (file) => {
  return readFileAsDataURL(file)
  .then(imageProcess);
};

Использование такое, как вы его показали:

readerProcess(file).then(
  res => {console.log('reader resuld', res)},
  err => {console.log('error')}
);