如何 return 正确响应异步函数并将其推送到另一个对象

Question

我有一个 Angular 11.x 应用程序向后端系统执行 http 请求，该后端系统使用 FFMPEG 从视频文件（例如 mp4/mov）读取数据，由于处理完成这个异步请求需要 10 秒。

为了更加清晰，我对一些值进行了硬编码

//视频-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（下载文件并在端点中使用 FFMPEG 获取元数据）

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 => {

            }
        );
    });
}

getMetadata 函数中的 post/media-check 命中一个 PHP 端点并且 returns 以下响应类似于以下内容。

{
   "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"
}

如何从异步请求的后端响应中获取错误数组直接推送到 self.errorMessages 变量？

Answer 1

首先您需要确保您的 video-service 正确处理错误。

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);
            }
        );
    });
}

然后在你的video-component中你可以这样处理这个场景：

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);
}

如何 return 正确响应异步函数并将其推送到另一个对象

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

javascript

json

typescript

angular

angular11