How to return response from async function correctly & push it into another object

Question

I have an Angular 11.x app that performs a http request to a backend system that reads data from a video file (e.g mp4/mov) using FFMPEG, due to the processing it takes 10 seconds to complete this async request.

I've hard coded some of the values for greater clarity

// video-component.ts

let fileUrl = 'https://abc.s3.eu-west-2.amazonaws.com/video.mp4';
let fileSize = '56117299';
this.videoMetadata = this.videoService.getVideoMediaData(fileUrl, fileSize);

// if any errors found from the async response loop through them and push them into the following error which displays this on the frontend

/* I need to push the errors from the request above into this `errorMessages` variable
self.errorMessages['Instagram'].push({
    "message": "Video must be between 3-60 seconds in duration",
});
*/

// video.service.ts (downloads the file & gets metadata using FFMPEG in the endpoint)

public getMetadata(file: string, size: string): Observable<any> {
    let params = new HttpParams();
    params = params.append('file', file);
    params = params.append('size', size);
    return this.http.get('post/media-check', { params })
        .pipe(map(response => {
            return response;
    }));
}

public getVideoMediaData(file, size) {
    return new Promise((resolve, reject) => {
        this.getMetadata(file, size).subscribe(
            data => {
                resolve(data);
            },
            errorResponse => {

            }
        );
    });
}

The post/media-check in the getMetadata function hits an PHP endpoint and returns the following response similar to the following.

{
   "status":"200",
   "data":{
      "video":{
         "container":"mov",
         "bitrate":338,
         "stream":0,
         "codec":"h264",
         "fps":3
      }
   },
   "errors":["Video must be at least 25 frames per second (fps)"],
   "responseType":"json",
   "response":"success"
}

How do I get the errors array from the backend response from the async request push directly into the self.errorMessages variable?

Answer 1

First you need to make sure that your video-service is handling errors properly.

public getVideoMediaData(file, size) {
    return new Promise((resolve, reject) => {
        this.getMetadata(file, size).subscribe(
            data => {
                resolve(data);
            },
            errorResponse => {
                // Reject the Promise and pass the error response in the rejection
                reject(errorResponse);
            }
        );
    });
}

Then in your video-component you can handle this scenario like this:

let fileUrl = 'https://abc.s3.eu-west-2.amazonaws.com/video.mp4';
let fileSize = '56117299';
try {
    this.videoMetadata = await this.videoService.getVideoMediaData(fileUrl, fileSize);
    // happy path - do something with this.videoMetadata
} catch(e) {
    // unhappy path - e = errorResponse
    const messages = errorResponse.errors.map(message => ({ message }));
    self.errorMessages['Instagram'].push(...messages);
}