Tengo una aplicación Angular 11.x que realiza una solicitud http a un sistema de back-end que lee datos de un archivo de video (por ejemplo, mp4/mov) usando FFMPEG, debido al procesamiento, se tarda 10 segundos en completar esta solicitud asíncrona.
He codificado algunos de los valores para mayor claridad.
// video-componente.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 (descarga el archivo y obtiene metadatos usando FFMPEG en el punto final)
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 => { } ); }); } La post/media-check en la función getMetadata llega a un punto final de PHP y devuelve la siguiente respuesta similar a la siguiente.
{ "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" } ¿Cómo obtengo la matriz de errores de la respuesta de back-end de la inserción de solicitud asíncrona directamente en la variable self.errorMessages ?
Primero debe asegurarse de que su video-service esté manejando los errores correctamente.
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); } ); }); } Luego, en su video-component puede manejar este escenario de esta manera:
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); }