Angular拦截器中全局设置observe:'response'的实现方法咨询

嘿，我完全懂你的烦恼——每次写HTTP请求都手动加{observe:'response'}确实重复又繁琐，用拦截器来统一处理绝对是更优雅的方案！

其实关键就在于修改克隆请求的配置选项，因为Angular的HttpRequest是不可变对象，所有修改都必须通过clone()方法来完成。结合你现有的代码，只需要在克隆请求的时候，把observe参数统一设置为'response'就行。

具体修改步骤 #

你现有的代码里已经在克隆请求并添加token了，只需要在这个克隆的基础上，再扩展配置选项：

return observablePromise.pipe(mergeMap(user_tokens => { 
  let access_token = user_tokens ? user_tokens.access_token : null; 
  // 1. 先添加token克隆请求，再修改observe选项
  let clonedReq = this.addToken(request, access_token).clone({
    observe: 'response' as const // 强制类型为'response'，避免TS类型报错
  }); 
  return next.handle(clonedReq).pipe(
    // 你的其他拦截逻辑（比如错误处理）
  );
}));

为什么这么做？ #

• HttpRequest是不可变的，所以必须通过clone()来修改任何请求属性，包括observe这种配置参数。
• 这样所有经过该拦截器的请求，都会自动以observe:'response'的方式发送，你在订阅的时候直接就能拿到完整的HttpResponse对象，不用再每个请求手动加配置。

可选：灵活跳过某些请求 #

如果有个别请求不需要获取完整响应（只想拿到响应体），可以给这类请求加个自定义Header，在拦截器里判断并跳过设置observe:'response'：

1. 拦截器里的判断逻辑：

return observablePromise.pipe(mergeMap(user_tokens => { 
  let access_token = user_tokens ? user_tokens.access_token : null; 
  // 检查是否有跳过的自定义Header
  const skipObserve = request.headers.has('Skip-Observe-Response');
  // 根据情况设置observe选项
  const observeConfig = skipObserve ? undefined : 'response' as const;

  let clonedReq = this.addToken(request, access_token).clone({
    observe: observeConfig
  });

  // 移除自定义Header，避免传到服务器
  if (skipObserve) {
    clonedReq = clonedReq.clone({
      headers: clonedReq.headers.delete('Skip-Observe-Response')
    });
  }

  return next.handle(clonedReq).pipe(
    // 你的其他拦截逻辑
  );
}));

2. 需要跳过的请求示例：

// 这个请求只会拿到响应体，不会获取完整响应
this.http.post(LoginUser, userData, {
  headers: new HttpHeaders().set('Skip-Observe-Response', 'true')
}).subscribe(bodyData => {
  // 这里的bodyData就是响应体内容
});

这样既实现了统一配置，又保留了特殊场景的灵活性，完全符合你不想重写HTTP类的需求~

内容的提问来源于stack exchange，提问作者Nika Kurashvili