代码之家 › 专栏 › 技术社区 › Hearen

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

angular-httpclient-interceptors angular

0

Hearen · 技术社区 · 7 年前

我所知道的事情( 如果我错了,请纠正我,谢谢:) ):

HttpInterceptor 工作方式类似于 Aspect-oriented programming ;
添加/修改 httpOptions 可满足要求;
用修改响应 clone() 也可以实现响应;

我的问题

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

当请求满足某些模式时,是否可以返回一个已经准备好的模拟数据而不请求服务器? 即使是服务也存在于其他图书馆 ?

我的要求

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

更新日期:2019-01-15

多亏了 @ Sachin Gupta 我测试了 interceptor 更进一步 demo .

所做的工作:

auth-interceptor.ts 为请求添加头文件;
logging-interceptor.ts 添加以跟踪请求详细信息和时间成本;
data-mocking-interceptor.ts 到停止向服务器发出请求并直接返回模拟数据。

2 回复 | 直到 7 年前

1

Sachin Gupta 7 年前

看看这个。

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))}) );
  }
}

2

0

tlt 7 年前

您还有两个选择要考虑:

使用 ngrx store 在这里,您可以用模拟数据直接填充存储,或者从服务返回模拟数据(服务是向服务器发送HTTP请求并将数据返回到Angular应用程序的服务)。

或

使用服务人员,您可以根据自定义条件返回所需的任何内容。基本上,你在这里做的是离线的第一个PWA。这是更好的方法,因为HTTP请求(作为数据源)完全从其使用中抽象出来。你的应用程序看到的只是服务工作者,服务工作的地方会得到它的数据(HTTP或模拟)——你的应用程序不在乎。

PS。服务工作者方法与拦截器方法有点相似,但在较低的层次上,因为它不是角度特定的,而是Web技术的一部分。