如何将Postman模拟服务器与Angular结合使用
例如，需要经过身份验证的用户体验的应用程序可能需要新的/authenticate端点。
如果由于任何原因端点开发停滞或落后，尽管有冲刺计划，您仍将面临这样的问题：您是否使用数据进行构建？
幸运的是，还有第三种选择：使用模拟数据进行构建（这可以根据您的用例而工作）。当该功能是冲刺结束时必须具备的功能时，此选项特别有用。
方便使用模拟数据的其他一些优点包括：
使用不同的 API 响应数据进行更好的测试
使用去识别化数据进行安全测试
可重复使用的测试数据
更流畅的演示——以防万一真实服务器决定离线
有多种工具可以帮助创建和使用模拟数据，例如Postman及其模拟服务器。您还可以将这些工具集成到前端应用程序中以供开发使用。
Postman 模拟服务器可以直接设置并与 Angular 应用程序集成，特别是当它与 Angular 拦截器配对时。它可能并不适合所有用例，但它提供了一种处理模拟数据的便捷方法。
（更|多优质内|容：java567 点 c0m）
什么是邮递员模拟服务器？
Postman是一个协作 API 平台，旨在支持 API 的完整生命周期。它提供了有助于设计、记录、测试、监控、共享和使用 API 的工具和集成。
Postman 模拟服务器是一个虚拟 API 服务器，它接受对您在集合中创建的端点的请求，并返回您在示例中指定的响应。它有自己的基本 URL和可选的API 密钥以提高安全性。
Postman 集合是一种逻辑分组，有助于组织相关请求，而 Postman 示例是操作中的请求的实例。它由请求和预期响应组成。
如果您想了解更多信息，Postman 文档提供了有关集合和示例的更全面的详细信息。
一旦您决定使用 Postman 模拟服务器，您就需要将其与应用程序集成，以免：
扰乱正在进行的开发
打破应用程序
我想到了两种流行的方法：
使用代理
使用HTTP 拦截器
这两个选项之间的主要区别在于代理是在构建时应用的，而拦截器是在运行时应用的。
什么是代理？
代理服务器是一种软件工具，通常充当客户端和服务器之间的中介。它接收来自客户端的请求，修改并将其中一些请求转移到其他服务器。
Angular 使用Webpack 的开发服务器作为代理。可以通过Angular CLI将其配置为将某些请求转移到不同的服务器。这使得它成为在开发中与 Postman 模拟服务器一起使用的可行解决方案。
什么是 Angular HTTP 拦截器？
AngularHttpInterceptor是一个轻量级类，可以利用传出请求或传入响应。它可用于检查请求或转换请求的一部分，例如 URL 或标头。如果您使用拦截器而不是代理：
您可以访问运行时环境变量来确定是否将请求转移到模拟服务器
更改拦截器后，您无需重新提供应用程序 - 代码更改会触发重新加载（如果启用了实时重新加载）
代理和拦截器本质上可以做同样的事情：挖掘并转换传出的请求。然而，每种选择都有其自身的优点和缺点。
拦截器与代理
与代理相比，拦截器需要的设置相对较少
代理需要在系统或.env文件中设置构建时环境变量（如果需要 API 密钥，拦截器可能需要此变量）
对代理的更改将要求重新提供应用程序，而对拦截器的更改将触发重新加载
如果您不熟悉在 Angular 中设置代理，那么学习曲线预计会比较温和。然而，创建拦截器时有一个更温和的学习曲线，因为它只是一个类
对于这个简单的用例，使用拦截器似乎是一个更直接的选择。
如何创建 Postman 模拟服务器
使用模拟服务器的第一步是创建一个。首先，确保您有一个 Postman 帐户和一个工作区。您可以从平台的网站创建两者。Postman 工作区就像一个仪表板，用于组织您的工作、工具和协作者。
然后，创建一个 Postman 集合来分组和组织您希望模拟服务器处理的请求。
接下来，将请求添加到集合中。它可以是任何类型的CRUDL请求。使用实际服务器的 URL – 就像测试真实端点时一样。
以下是包含集合和 GET 请求的工作区的快照：
有请求的集合
接下来，通过发送请求来测试您的端点。执行此操作，直到收到成功的响应，然后将响应保存为 Postman 示例。您可以通过删除用户信息或 PII 等任何敏感数据来更新示例。
这是更新后的示例的快照。一些用户信息已使用 Postman 变量替换为一些模拟数据。
请求的更新示例
最后，从您刚刚创建的集合中创建一个 Postman 模拟服务器。您可以通过单击集合旁边的省略号并选择Mock collection（至少在撰写本文时）来完成此操作。这是这些步骤的快照。
如何从集合创建模拟服务器
您将看到一个简单的表单，允许您配置模拟服务器。
例如，您可以重命名模拟服务器或将其设为私有——这意味着它将需要 API 密钥。
配置模拟服务器后，单击Create Mock Server。然后您将获得服务器的 URL。复制网址。
要将模拟服务器与您的请求和示例相关联，请进入集合并更新 URL。将请求和示例的基本 URL 替换为复制的模拟服务器的基本 URL。在 Postman 中发送一些请求以验证您的设置是否成功。
笔记：
如果您的 API 是私有的，您可以从帐户中的设置生成 API 密钥
您的模拟服务器会保留收到的请求日志，您可以在工作区中查看该日志
创建模拟服务器后，在 Angular 应用程序中创建拦截器。
有关更多信息，您可以参考文档。
如何创建 Angular HTTP 拦截器
拦截器是一个实现 AngularHttpInterceptor接口的可注入类。
这个接口有一个必需的方法——intercept方法。该方法主要做一件事：它接受请求和处理程序参数并将请求传递给next处理程序的方法。请求在传递给处理程序之前可以进行更改。
@Injectable()
export class ApiInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<unknown>, next: HttpHandler):
Observable<HttpEvent<unknown>>
{
return next.handle(req);
}
}
要在应用程序中使用创建的拦截器，请将其添加到导入的providers同一级别的数组中：HttpClientModule
[{ provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true }]
这样它就可以由 Angular 的依赖注入系统作为HttpClient服务的可选依赖项进行管理。该HttpClient服务用于发出 HTTP 请求。
请注意，在使用拦截器时，顺序很重要。
例如，如果您在添加 API 密钥标头的 API 拦截器之后提供另一个添加身份验证标头的拦截器，则请求可能会向模拟服务器发送不必要的标头。
最后，将模拟服务器与您的应用程序集成。
有关更多信息，请参阅文档。
如何将 Angular Http 拦截器与 Postman 模拟服务器结合使用
首先，指定一个环境变量以在模拟数据和真实数据之间切换。Angular 中的环境变量主要定义为环境文件中的 TypeScript 变量：
// environment.ts file
export const environment = {
production: false,
useMock: true,
postman: {
baseUrl: "postman-mock-server-url",
apiKey: "optional-mock-server-api-key"
}
};
至少对于框架版本<15。
然后，在拦截器中使用环境变量。您可以在其中克隆传出请求并在将其传递给处理程序之前更新其 URL：
@Injectable()
export class ApiInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<unknown>, next: HttpHandler):
Observable<HttpEvent<unknown>>
{
if (environment.useMock) {
// optional headers
const headers = new HttpHeaders({
"x-api-key": "my-api-key"
});
const cloneReq = req.clone({ url: this.getUpdatedURL(req.url), headers });
return next.handle(cloneReq);
}
return next.handle(req);
}
}
结论
总而言之，在应用程序中使用模拟数据，尤其是数据密集型应用程序，可能很麻烦。但他们确实有自己的优点。
可重复使用的模拟数据有助于使测试更好、更安全，特别是在数据变化且去识别化的情况下。此外，它们有助于在无法获得真实数据的情况下推进开发。
有一些工具可以帮助通过模拟服务器创建和管理模拟数据，例如 Postman。
这些工具不仅对于 API 和后端软件工程师来说非常有用，对于前端软件工程师来说也是如此。
