模拟服务器响应，即使服务器无法访问

Question

我知道的（如有错误请指正，谢谢:)）：

• HttpInterceptor 的工作方式类似于 Aspect-oriented programming;
• adding/modifying httpOptions 请求可以实现;
• 用clone()修改response也可以实现response;

我的问题

我想测试一些库，而它们的相关服务器在开发时有时会宕机我只关心数据，不与服务器交互是可以的

Is it possible that I can just return a mock data already prepared without requesting the server when the request met some patterns even the service lies in other libraries?

我的要求

• 库中的所有逻辑都保持不变；
• 使用模拟数据响应来自图书馆的 http 请求；

2019-01-15 更新

感谢@Sachin Gupta的帮助，我测试了interceptor further with this demo。

已完成：

• auth-interceptor.ts为请求添加headers；
• logging-interceptor.ts 添加了跟踪请求详细信息和时间成本；
• data-mocking-interceptor.ts 到 停止 对服务器的请求和直接 return 模拟数据。

Answer 1

看看这个。

https://stackblitz.com/edit/angular-json-http-response-catch

如果服务器可达，则填充数据，否则将模拟作为响应发送

拦截器

export class NoopInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
      let response = new HttpResponse();
      response = response.clone({body: [{"sads":"ewre"}]});
   
    return next.handle(req).pipe(catchError((err) => {return of(response).pipe(delay(10))}) );
  }
}

Answer 2

您还有 2 个其他选项可供考虑：

1. 使用 ngrx store，您可以直接使用模拟数据或来自您的服务的 return 模拟数据填充商店（服务是向服务器发送 http 请求的服务，return s 数据返回到 angular 应用）

或

2. 根据您的自定义条件，在您可以 return 任何您想要的地方使用服务人员。本质上，您在这里所做的是离线优先 PWA。这是更好的方法，因为 http 请求（作为数据源）完全从其用法中抽象出来。你的应用程序看到的只是服务工作者，服务工作的地方获取它的数据（http 或模拟）——你的应用程序不关心。

PS。 Service Worker 方法有点类似于拦截器，但级别较低，因为它不是 angular 特定的，而是一般网络技术的一部分。