Правильный способ устранения ошибок от звонка на услугу Angular - PullRequest
Новая
       15

Правильный способ устранения ошибок от звонка на услугу Angular

0 голосов
/ 23 мая 2019

Я новичок в Angular, поэтому прошу прощения за любые грубые ошибки, если вы их видите. Не стесняйтесь указывать мне в правильном направлении:)

У меня есть служба Angular, которая вызывает метод контроллера. Раньше его так называли, и он возвращал объект, содержащий данные, используемые для отображения изображения в браузере 

      return (this.http.post(`/api/vehicles/${vehicleId}/photos`, formData)
         .map(res => res);

При загрузке изображения меня попросили добавить индикатор выполнения, поэтому я добавил опцию reportProgress в вызов http. У моего сервиса теперь есть свойство uploadProgress, которое я могу привязать к индикатору выполнения и отображать ход загрузки. 

@Injectable()
export class PhotoService {

   uploadProgress: any;

...
   upload(vehicleId, photo) {

      let formData = new FormData();
      formData.append('file', photo);

      const uploadReq = new HttpRequest('POST', `/api/vehicles/${vehicleId}/photos`, formData, {
         reportProgress: true
      });

      return (this.http.request(uploadReq)
         .map((event) => {
            if (event.type === HttpEventType.UploadProgress) {
               this.uploadProgress = this.createProgress(event);
            } else if (event.type === HttpEventType.Response) {
               return event.body;
            }
         }));

   }

   private createProgress(event) {
      return {
         total: event.total,
         percentage: Math.round(event.loaded / event.total * 100)
      };
   }

Метод в моей форме теперь выглядит следующим образом 

   uploadPhoto() {
      var nElem: HTMLInputElement = this.fileInput.nativeElement;

      var file = nElem.files[0];
      nElem.value = '';

      this.photoSvc.upload(this.vehicleId, file)
         .subscribe(photo => {
            this.progress = this.photoSvc.uploadProgress;
            console.log('this.progress: ', this.progress);
            if (photo !== undefined) {
               console.log('Photo result:', photo);
               this.photos.push(photo);
            }
         },
            err => {
               this.toasty.error({
                  title: 'Error',
                  msg: err.text(),
                  theme: 'bootstrap',
                  showClose: true,
                  timeout: 5000
               });
         },
         () => { this.progress = null; });
   }

Блок подписки срабатывает несколько раз, и я использую его для обновления переменной this.progress, связанной с индикатором выполнения. Это работает, я не уверен, что это правильный способ сделать это, но это работает. Если это не правильный путь, не стесняйтесь разрабатывать.

Проблема, с которой я теперь не могу разобраться, заключается в том, что если выполняются мои крайние случаи в контроллере (размер файла, тип файла, пустой файл и т. Д.), Они возвращают ошибки BadRequest, как в примерах ниже, но мой блок err на подписка не перехватывает их, поэтому всплывающее сообщение не отображается. Вместо этого он обращается к моему глобальному обработчику ошибок. Я хотел, чтобы в этой загрузке отображались более значимые сообщения вместо общего тост-сообщения, которое теперь выдает система. 

if (file == null) { return BadRequest("Null file"); }
if (file.Length == 0) { return BadRequest("Empty file"); }

Любая помощь в том, что здесь происходит, приветствуется. Заранее спасибо!

1 Ответ

0 голосов
/ 23 мая 2019

ОК, так что вините в этом копирование и вставку. Я понял, что мой блок err был неправильным, когда мой код sentry.io опубликовал ошибку «err.text не является функцией». Я использовал 

            err => {
               this.toasty.error({
                  title: 'Error',
                  msg: err.text(),
                  theme: 'bootstrap',
                  showClose: true,
                  timeout: 5000
               });
         }

вместо 

            err => {
               this.toasty.error({
                  title: 'Error',
                  msg: err.error,
                  theme: 'bootstrap',
                  showClose: true,
                  timeout: 5000
               });
         }

и после исправления код работал нормально. Извините за беспокойство, уже поздно ...

...