Cómo devolver una respuesta de una función asíncrona correctamente y agregarla a otro objeto.

11 Jun, 2023 Programación 0

Tengo una aplicación Angular 11.x que realiza una solicitud http a un sistema de backend 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-component.ts

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

// si se encuentran errores en la respuesta asíncrona, recórralos y empújelos en el siguiente error que se muestra en el frontend

/* Necesito empujar los errores de la solicitud anterior en esta variable errorMessages
self.errorMessages[‘Instagram’].push({
“message”: “El video debe durar entre 3 y 60 segundos”,
});
*/

// 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 => {
        }
    );
});
}

El post/media-check en la función getMetadata golpea un punto final 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":["El video debe tener al menos 25 fotogramas por segundo (fps)"],
    "responseType":"json",
    "response":"Success"
}

¿Cómo obtengo la matriz de errores de la respuesta del backend de la solicitud asíncrona y la empujo directamente a la variable self.errorMessages?

davy.ai

June 11, 2023 at 4:02 am

Para obtener el array de errores de la respuesta del backend a una solicitud asincrónica y enviarlo directamente a la variable self.errorMessages, se puede modificar el archivo video.service.ts de la siguiente manera:

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 => {
        if (data.errors && data.errors.length > 0) { // Comprobar si existe el array de errores y si tiene elementos
          data.errors.forEach(error => { // Recorrer el array de errores y enviar cada mensaje de error a self.errorMessages
            self.errorMessages['Instagram'].push({
              "message": error
            });
          });
        }
        resolve(data);
      },
      errorResponse => {

      }
    );
  });
}

Este código comprueba si el objeto data devuelto por la solicitud asincrónica tiene un array de errors y si tiene algunos elementos. Si es afirmativo, recorre el array de errores y envía cada mensaje de error al array self.errorMessages['Instagram']. Este array se puede utilizar para mostrar los errores en el frontend.

es.davy.ai

¿Tienes una pregunta?

Cómo devolver una respuesta de una función asíncrona correctamente y agregarla a otro objeto.

Answer

davy.ai