Angular 6 - HttpInterceptors - HttpResponse 主体没有被修改答案

【问题标题】：Angular 6 - HttpInterceptors - HttpResponse body not getting modifiedAngular 6 - HttpInterceptors - HttpResponse 主体没有被修改
【发布时间】：2019-01-09 23:58:01
【问题描述】：

我只是实现HttpInterceptor，我想base64 编码请求正文和base64 解码响应正文。

方法：HTTP Post 请求/响应
数据格式：json（这应该被编码/解码）

这是我完成的代码。当我调试它时，解码的数据（即）json 被设置回event.body。但是，它没有在服务中被接收，实际上是在进行 http 调用

@Injectable()
export class Base64Interceptor implements HttpInterceptor {

    constructor(private base64UtilService: Base64UtilService) {

    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let requestClone = request.clone(
            {
                body: this.base64UtilService.encode(JSON.stringify(request.body)),
                responseType: 'text'
            }
        )
        return next.handle(requestClone).pipe(tap(event => {
            if (event instanceof HttpResponse) {
                debugger;
                let decodedData = this.base64UtilService.decode(event.body);
                event = event.clone({
                    body: decodedData
                });
                return event;
            }
        },
            (err: any) => {
                if (err instanceof HttpErrorResponse) {
                    console.log(err);
                }
            }))
    }

}

我只是得到了实际上来自服务器的相同响应，event.body 的解码没有反映。谢谢你的时间

这就是http调用的方式

 sendActivationRequest(url: string, request: MyRequest): Observable<MyResponse> {
        return this.httpClient.post<MyResponse>(url, request)
          .pipe(map((response: MyResponse) => {
            return response;
          }), catchError((error) => {
            return throwError(error);
          }));
      }

【问题讨论】：

请发布您的http 调用方法。
@hrdkisback 我已添加到帖子中

标签： angular angular6 angular-http angular-http-interceptors

【解决方案1】：

我使用 map 而不是 tap 成功获得了修改后的响应正文：

return next.handle(requestClone).pipe(map(event => {...}));

这是因为地图与点击的行为：

来自tap documentation： “对源 Observable 的每次发射执行副作用，但返回与源相同的 Observable。”

来自map documentation：“将给定的项目函数应用于源 Observable 发出的每个值，并将结果值作为 Observable 发出。”

【讨论】：

谢谢@Cristina，我会试试你的解决方案然后回来！