在另一个可观察对象中使用数据，然后将结果作为其他可观察对象返回

Question

我正在解决这个问题：

申请流程：

我必须调用第一个 API 端点（为简单起见，我们称之为 EP-A），它将 Blob 作为主体，将文件类型作为请求参数。它通过调用自动生成的类来执行

  uploadFile$Response(params?: {
    fileType?: 'USER_AVATAR' | 'UNKNOWN' | 'DELIVERY_LOGO' | 'PAYMENT_LOGO' | 'ITEM_PICTURE';
    body?: { 'file'?: Blob }
  }): Observable<StrictHttpResponse<FileUploadResponse>> {

    const rb = new RequestBuilder(this.rootUrl, FileControllerService.UploadFilePath, 'post');
    if (params) {
      rb.query('fileType', params.fileType, {});
      rb.body(params.body, 'application/json');
    }

    return this.http.request(rb.build({
      responseType: 'blob',
      accept: '*/*'
    })).pipe(
      filter((r: any) => r instanceof HttpResponse),
      map((r: HttpResponse<any>) => {
        return r as StrictHttpResponse<FileUploadResponse>;
      })
    );
  }

StrictHttpResponse<T> 只是一个包含“通用”主体的接口（因此您可以检索具有由 swagger 定义的结构的数据，从该结构生成此方法）。

然后是 FileUploadResponse 的结果，它是一个类似的对象

{
 uuid: string,
 time: Timestamp

 ...
 Other members omitted for simplicity
 ...
}

被发送到另一个 EP（我们称之为 EP-B）紧接着 EP-A 调用返回一个值，EP-B 将下面的对象作为主体，将当前记录的人员作为路径变量。

{
 uuid: string
}

所以在调用 EP-B 之前，应该解析来自 EP-A 的结果（在这种情况下，应该获取 uuid 字段并将其放入一个新对象中以供 EP-B 调用）

再次通过具有与上述签名相似的签名的生成方法（为简单起见，我将省略它）。

如果一切正常，我想让来电者知道这一点。如果有任何失败（这两个 EP 调用中的任何一个），我想让它知道调用此方法以做出某种反应（显示警报，以某种方式更改页面，...）

我现在的方法不完整，我不知道如何“连接”这两个 Observables，我读过有关 mergeMap、flatMap 等的信息，但我不确定如何在我的情况下使用它。

  updateUserAvatar(avatar: Blob): Observable<boolean> {

    return new Observable<boolean>((observer) => {

      // Calling EP-A
      this.avatarFormChangeRequestSubscription = this.fileControllerService.uploadFile$Response({
        fileType: 'USER_AVATAR',
        body: {
          file: avatar
        }
      })
        .subscribe((response: StrictHttpResponse<FileUploadResponse>) => {
            // Handle returned UUID and somehow pass it into an observable belog
            console.log(response);
          },
          (error: any) => {
            observer.error(error);
          });

      // Creating object for EP-B calling
      const avatarUpdateParams = {
        id: 1, // Just dummy ID for now, will be dynamically changed
        body: {
          avatarUUID: '' // the UUID from observable response above should be placed here
        }
      };

      // Calling EP-B
      this.avatarFormChangeRequestSubscription = this.userControllerService.updateUserAvatar$Response(avatarUpdateParams)
        .subscribe((response: StrictHttpResponse<string>) => {
          // Handle successfull avatar upload (change the "Logged user" object avatar to change it everywhere etc
          console.log(response);
          observer.next(true);
        },
          (error: any) => {
            observer.error(error);
          });
    });
  }

最后，我还想添加 “用例”流程，以从用户角度了解我想要实现的目标：

用户上传他的照片，该照片首先上传到BE端的文件系统（并与数据库记录链接），然后将该文件链接到他的个人资料作为他的个人资料图片。

Answer 1

您可以使用rxjs 来完成。类似的东西可能有效：

this.fileControllerService.uploadFile$Response({
    fileType: 'USER_AVATAR',
    body: {
      file: avatar,
    },
  })
  .pipe(
    tap((responseOfFirstApiCall: StrictHttpResponse<FileUploadResponse>) => {
      // Do whatever you want here, but you might not need that since you get the response below as well (in the flatMap)
      // Handle returned UUID and somehow pass it into an observable belog
      console.log(response);
    }),
    flatMap(
      (responseOfFirstApiCall: StrictHttpResponse<FileUploadResponse>) => {
        // Creating object for EP-B calling
        const avatarUpdateParams = {
          id: 1, // Just dummy ID for now, will be dynamically changed
          body: {
            avatarUUID: '', // the UUID from observable response above should be placed here
          },
        };

        return this.userControllerService.updateUserAvatar$Response(avatarUpdateParams);
      }
    ),
    tap((responseOfTheSecondApiCall: StrictHttpResponse<string>) => {
      // Handle successfull avatar upload (change the "Logged user" object avatar to change it everywhere etc
      console.log(response);
      observer.next(true);
    }),
    catchError((err: any) => of(err))
  )
  .subscribe(); // Empty subscribe() call to trigger the http request. Not needed if you get the result somewhere else (eg if your method return an observable that you want to handle the result somewhere else)

flatMap() 与 mergeMap 相同。随心所欲地更改它，有很多选项，例如 map 或 switchMap，您应该了解它们，因为它们很有用。

基本上，pipe 允许您链接函数，如果出现错误，则触发 catchError。

提示：请注意，pipe 中的内容在您的 api 调用结果之前执行。因此，如果您想在获得结果之前对结果做一些事情，那么请考虑rxjs：

服务

getUser(id: string) {
  return this._http.get<any>(url).pipe(
    map(result => result.email), // Return only the email
  );
}

组件：

  ngUnsubscribe = new Subject();

  ngOnInit() {
    this._userService.getUser(1)
    .pipe(takeUntil(this.ngUnsubscribe)) // Don't forget to unsubscribe !
    .subscribe(email => console.log('email = ', email))
  }

  ngOnDestroy() {
    this.ngUnsubscribe.unsubscribe();
    // or
    // this.ngUnsubscribe.next();
    // this.ngUnsubscribe.complete();
  }