angular - 即使服务器无法访问，也可以模拟服务器响应

Question

我知道的事情（如果我错了，请纠正我，谢谢:)）：

• HttpInterceptor工作方式类似于面向方面的编程；
• httpOptions可以对请求进行添加/修改；
• 修改response withclone()也可以实现response；

我的问题

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

当请求满足某些模式时，即使服务位于其他库中，我是否可以只返回已经准备好的模拟数据而不请求服务器？

我的要求

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

更新于 2019-01-15

感谢@Sachin Gupta的帮助，我interceptor用这个演示进一步测试了。

做了什么：

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

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可以直接使用模拟数据填充存储或从服务返回模拟数据的位置（服务是将 http 请求发送到服务器并将数据返回到 Angular 应用程序的服务）

或者

2. 使用服务人员，您可以根据您的自定义标准返回您想要的任何内容。本质上，您在这里所做的是离线第一个 PWA。这是更好的方法，因为 http 请求（作为数据源）完全从其使用中抽象出来。您的应用程序看到的只是服务人员，服务工作的地方获取其数据（http 或模拟）-您的应用程序不在乎。

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