如何將Postman模擬服務(wù)器與Angular結(jié)合使用
例如，需要經(jīng)過身份驗證的用戶體驗的應(yīng)用程序可能需要新的/authenticate端點。
如果由于任何原因端點開發(fā)停滯或落后，盡管有沖刺計劃，您仍將面臨這樣的問題：您是否使用數(shù)據(jù)進行構(gòu)建？
幸運的是，還有第三種選擇：使用模擬數(shù)據(jù)進行構(gòu)建（這可以根據(jù)您的用例而工作）。當(dāng)該功能是沖刺結(jié)束時必須具備的功能時，此選項特別有用。
方便使用模擬數(shù)據(jù)的其他一些優(yōu)點包括：
使用不同的 API 響應(yīng)數(shù)據(jù)進行更好的測試
使用去識別化數(shù)據(jù)進行安全測試
可重復(fù)使用的測試數(shù)據(jù)
更流暢的演示——以防萬一真實服務(wù)器決定離線
有多種工具可以幫助創(chuàng)建和使用模擬數(shù)據(jù)，例如Postman及其模擬服務(wù)器。您還可以將這些工具集成到前端應(yīng)用程序中以供開發(fā)使用。
Postman 模擬服務(wù)器可以直接設(shè)置并與 Angular 應(yīng)用程序集成，特別是當(dāng)它與 Angular 攔截器配對時。它可能并不適合所有用例，但它提供了一種處理模擬數(shù)據(jù)的便捷方法。
（更|多優(yōu)質(zhì)內(nèi)|容：java567 點 c0m）
什么是郵遞員模擬服務(wù)器？
Postman是一個協(xié)作 API 平臺，旨在支持 API 的完整生命周期。它提供了有助于設(shè)計、記錄、測試、監(jiān)控、共享和使用 API 的工具和集成。
Postman 模擬服務(wù)器是一個虛擬 API 服務(wù)器，它接受對您在集合中創(chuàng)建的端點的請求，并返回您在示例中指定的響應(yīng)。它有自己的基本 URL和可選的API 密鑰以提高安全性。
Postman 集合是一種邏輯分組，有助于組織相關(guān)請求，而 Postman 示例是操作中的請求的實例。它由請求和預(yù)期響應(yīng)組成。
如果您想了解更多信息，Postman 文檔提供了有關(guān)集合和示例的更全面的詳細信息。
一旦您決定使用 Postman 模擬服務(wù)器，您就需要將其與應(yīng)用程序集成，以免：
擾亂正在進行的開發(fā)
打破應(yīng)用程序
我想到了兩種流行的方法：
使用代理
使用HTTP 攔截器
這兩個選項之間的主要區(qū)別在于代理是在構(gòu)建時應(yīng)用的，而攔截器是在運行時應(yīng)用的。
什么是代理？
代理服務(wù)器是一種軟件工具，通常充當(dāng)客戶端和服務(wù)器之間的中介。它接收來自客戶端的請求，修改并將其中一些請求轉(zhuǎn)移到其他服務(wù)器。
Angular 使用Webpack 的開發(fā)服務(wù)器作為代理?？梢酝ㄟ^Angular CLI將其配置為將某些請求轉(zhuǎn)移到不同的服務(wù)器。這使得它成為在開發(fā)中與 Postman 模擬服務(wù)器一起使用的可行解決方案。
什么是 Angular HTTP 攔截器？
AngularHttpInterceptor是一個輕量級類，可以利用傳出請求或傳入響應(yīng)。它可用于檢查請求或轉(zhuǎn)換請求的一部分，例如 URL 或標(biāo)頭。如果您使用攔截器而不是代理：
您可以訪問運行時環(huán)境變量來確定是否將請求轉(zhuǎn)移到模擬服務(wù)器
更改攔截器后，您無需重新提供應(yīng)用程序 - 代碼更改會觸發(fā)重新加載（如果啟用了實時重新加載）
代理和攔截器本質(zhì)上可以做同樣的事情：挖掘并轉(zhuǎn)換傳出的請求。然而，每種選擇都有其自身的優(yōu)點和缺點。
攔截器與代理
與代理相比，攔截器需要的設(shè)置相對較少
代理需要在系統(tǒng)或.env文件中設(shè)置構(gòu)建時環(huán)境變量（如果需要 API 密鑰，攔截器可能需要此變量）
對代理的更改將要求重新提供應(yīng)用程序，而對攔截器的更改將觸發(fā)重新加載
如果您不熟悉在 Angular 中設(shè)置代理，那么學(xué)習(xí)曲線預(yù)計會比較溫和。然而，創(chuàng)建攔截器時有一個更溫和的學(xué)習(xí)曲線，因為它只是一個類
對于這個簡單的用例，使用攔截器似乎是一個更直接的選擇。
如何創(chuàng)建 Postman 模擬服務(wù)器
使用模擬服務(wù)器的第一步是創(chuàng)建一個。首先，確保您有一個 Postman 帳戶和一個工作區(qū)。您可以從平臺的網(wǎng)站創(chuàng)建兩者。Postman 工作區(qū)就像一個儀表板，用于組織您的工作、工具和協(xié)作者。
然后，創(chuàng)建一個 Postman 集合來分組和組織您希望模擬服務(wù)器處理的請求。
接下來，將請求添加到集合中。它可以是任何類型的CRUDL請求。使用實際服務(wù)器的 URL – 就像測試真實端點時一樣。
以下是包含集合和 GET 請求的工作區(qū)的快照：
有請求的集合
接下來，通過發(fā)送請求來測試您的端點。執(zhí)行此操作，直到收到成功的響應(yīng)，然后將響應(yīng)保存為 Postman 示例。您可以通過刪除用戶信息或 PII 等任何敏感數(shù)據(jù)來更新示例。
這是更新后的示例的快照。一些用戶信息已使用 Postman 變量替換為一些模擬數(shù)據(jù)。
請求的更新示例
最后，從您剛剛創(chuàng)建的集合中創(chuàng)建一個 Postman 模擬服務(wù)器。您可以通過單擊集合旁邊的省略號并選擇Mock collection（至少在撰寫本文時）來完成此操作。這是這些步驟的快照。
如何從集合創(chuàng)建模擬服務(wù)器
您將看到一個簡單的表單，允許您配置模擬服務(wù)器。
例如，您可以重命名模擬服務(wù)器或?qū)⑵湓O(shè)為私有——這意味著它將需要 API 密鑰。
配置模擬服務(wù)器后，單擊Create Mock Server。然后您將獲得服務(wù)器的 URL。復(fù)制網(wǎng)址。
要將模擬服務(wù)器與您的請求和示例相關(guān)聯(lián)，請進入集合并更新 URL。將請求和示例的基本 URL 替換為復(fù)制的模擬服務(wù)器的基本 URL。在 Postman 中發(fā)送一些請求以驗證您的設(shè)置是否成功。
筆記：
如果您的 API 是私有的，您可以從帳戶中的設(shè)置生成 API 密鑰
您的模擬服務(wù)器會保留收到的請求日志，您可以在工作區(qū)中查看該日志
創(chuàng)建模擬服務(wù)器后，在 Angular 應(yīng)用程序中創(chuàng)建攔截器。
有關(guān)更多信息，您可以參考文檔。
如何創(chuàng)建 Angular HTTP 攔截器
攔截器是一個實現(xiàn) AngularHttpInterceptor接口的可注入類。
這個接口有一個必需的方法——intercept方法。該方法主要做一件事：它接受請求和處理程序參數(shù)并將請求傳遞給next處理程序的方法。請求在傳遞給處理程序之前可以進行更改。
?@Injectable()
?export class ApiInterceptor implements HttpInterceptor {
? ?intercept(req: HttpRequest<unknown>, next: HttpHandler):
? ? ?Observable<HttpEvent<unknown>>
? ?{
? ? ?return next.handle(req);
? ?}
?}
要在應(yīng)用程序中使用創(chuàng)建的攔截器，請將其添加到導(dǎo)入的providers同一級別的數(shù)組中：HttpClientModule
?[{ provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true }]
這樣它就可以由 Angular 的依賴注入系統(tǒng)作為HttpClient服務(wù)的可選依賴項進行管理。該HttpClient服務(wù)用于發(fā)出 HTTP 請求。
請注意，在使用攔截器時，順序很重要。
例如，如果您在添加 API 密鑰標(biāo)頭的 API 攔截器之后提供另一個添加身份驗證標(biāo)頭的攔截器，則請求可能會向模擬服務(wù)器發(fā)送不必要的標(biāo)頭。
最后，將模擬服務(wù)器與您的應(yīng)用程序集成。
有關(guān)更多信息，請參閱文檔。
如何將 Angular Http 攔截器與 Postman 模擬服務(wù)器結(jié)合使用
首先，指定一個環(huán)境變量以在模擬數(shù)據(jù)和真實數(shù)據(jù)之間切換。Angular 中的環(huán)境變量主要定義為環(huán)境文件中的 TypeScript 變量：
?// environment.ts file
?
?export const environment = {
? ?production: false,
? ?useMock: true,
? ?postman: {
? ? ?baseUrl: "postman-mock-server-url",
? ? ?apiKey: "optional-mock-server-api-key"
? ?}
?};
至少對于框架版本<15。
然后，在攔截器中使用環(huán)境變量。您可以在其中克隆傳出請求并在將其傳遞給處理程序之前更新其 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);
? ?}
?}
結(jié)論
總而言之，在應(yīng)用程序中使用模擬數(shù)據(jù)，尤其是數(shù)據(jù)密集型應(yīng)用程序，可能很麻煩。但他們確實有自己的優(yōu)點。
可重復(fù)使用的模擬數(shù)據(jù)有助于使測試更好、更安全，特別是在數(shù)據(jù)變化且去識別化的情況下。此外，它們有助于在無法獲得真實數(shù)據(jù)的情況下推進開發(fā)。
有一些工具可以幫助通過模擬服務(wù)器創(chuàng)建和管理模擬數(shù)據(jù)，例如 Postman。
這些工具不僅對于 API 和后端軟件工程師來說非常有用，對于前端軟件工程師來說也是如此。
