角度模拟服务器响应数据的更好方法?

时间:2019-01-16 02:07:02

标签: angular angular-http-interceptors

我目前正在开发组件库,该库将依赖于那里的不同服务器。

我正在创建一个使用组件库的演示应用程序,因此interceptors可以轻松捕获所有请求,以模拟我创建的demo的服务器响应。

限制

  • 组件本身将处理请求(组件用户将仅传递关键参数);
  • 不允许对组件库进行任何修改;

现实

  • 服务器有时可能无法访问;
  • 制作演示应用程序以演示如何实际使用组件实际上并不需要在大多数情况下与服务器进行实际交互;

但是我仍然很好奇:还有其他方法可以处理这种情况吗?

大多数时候,我听说拦截器曾经修改请求/响应(有时是缓存)而不是模拟

谢谢:)

2 个答案:

答案 0 :(得分:1)

在这种情况下,您可以使用JSON数据。您可以将JSON数据保存在文件中,并在Interceptors处拦截您的请求,然后从文件中发送模拟数据,如下所示。

@Injectable()
export class SampleInterceptor implements HttpInterceptor {
  constructor(private http: HttpClient) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const httpRequest = new HttpRequest(
      <any>request.method,
      "./../../assets/sample.json"
    );
    request = Object.assign(request, httpRequest);
    request = request.clone();
    return next.handle(request);
  }
}

答案 1 :(得分:0)

您可以安装json-server,然后仅使用其中的模拟数据。

npm install -g json-server

使用一些数据创建一个db.json文件

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

启动JSON服务器

json-server --watch db.json

现在,如果您去http://localhost:3000/posts/1,您将会得到

{ "id": 1, "title": "json-server", "author": "typicode" }

引用:https://github.com/typicode/json-server