Angular和RXJS：添加REST API後端

本文是SitePoint Angular 2教程的第3部分，介紹瞭如何使用Angular CLI創建CRUD應用程序。在本文中，我們將更新我們的應用程序，以與REST API後端進行通信。

> >更喜歡使用分步視頻課程學習角度？在SitePoint Premium上查看學習Angular 5。 在第一部分中，我們學會瞭如何將待辦器應用程序啟動，運行並部署到github頁面。這效果很好，但是不幸的是，整個應用都被擠入了一個組件。 在第二部分中，我們檢查了一個更模塊化的組件體系結構，並學習瞭如何將這個單個組件分解為一個較小組件的結構化樹，這些成分易於理解，重複使用和維護。

第0部分 - 終極角度CLI參考指南

第1部分 - 獲取我們的第一個todo應用程序啟動和運行

第2部分 - 創建單獨的組件以顯示戒酒列表和單個todo
1. >
>第3部分 - 更新托多服務以與REST API後端通信
第4部分 - 使用Angular路由器解決數據
第5部分 - 添加身份驗證以保護私人內容
第6部分 - 如何將Angular項目更新為最新版本。
5. >
6. >您不需要遵循本教程的第一部分和兩個部分才能使三個方面有意義。您只需獲取我們的存儲庫的副本，從第二部分中查看代碼，然後將其作為起點。下面更詳細地說明了這一點。
>
鑰匙要點

>在與REST API通信時，使用RXJS使用Angular的HTTPClient來有效處理異步HTTP請求。 在環境變量中存儲API URL，以在開發環境和生產環境之間無縫切換而不更改代碼。 實現Apiservice方法，例如GetallTodos，CreateTodo和Deletetodo，使用適當的HTTP方法與REST API進行交互。

>過渡tododataservice從內存存儲到利用apiservice進行數據操作，適應具有可觀察到的異步模式。

>更新AppComponent，要管理Apiservice返回的可觀察到的物品，以確保組件對數據的反應異步。
• >
介紹用於單元測試的Apimockservice，允許在沒有實際HTTP請求的情況下對Apiservice進行模擬，從而確保測試可靠性和獨立性。
• >
>配置角度應用程序測試設置以包括必要的服務，例如Apiservice並有效處理異步測試方案。
• >
• 快速回顧
• 這是我們的應用程序架構在第2部分的末尾的樣子：>

>當前，TodoDataservice將所有數據存儲在內存中。在第三篇文章中，我們將更新我們的應用程序，以與REST API後端進行通信。

我們將：
創建模擬REST API後端
將API URL作為環境變量存儲
• 創建一個apiservice與REST API後端進行通信
• >更新tododataservice以使用新的apiservice
• 更新AppComponent以處理異步API調用
• 創建一個apimockservice，以避免運行單元測試時真正的http調用。

在本文結尾處，您將了解：

>如何使用環境變量存儲應用程序設置
• >如何使用Angular HTTP客戶端執行HTTP請求
• >如何處理Angular HTTP客戶端返回的可觀察到
>您如何模擬HTTP調用以避免在運行單元測試時進行真正的HTTP請求。
• 所以，讓我們開始吧！
>
>向上並運行
>確保已安裝了最新版本的Angular CLI。如果不這樣
如果您需要刪除Angular CLI的先前版本，則可以：>
之後，您需要從第二部分中的代碼副本。這可以在Github上找到。本系列中的每個文章在存儲庫中都有一個相應的標籤，因此您可以在應用程序的不同狀態之間來回切換。

<span>npm install -g @angular/cli@latest
</span>

>我們在第二部分中以本文開始的代碼被標記為第2部分。我們結束本文的代碼被標記為第3部分。

>

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

>您可以將標籤視為特定提交ID的別名。您可以使用Git Checkout在它們之間切換。您可以在此處閱讀更多信息。

>因此，要啟動並運行（已安裝了Angular CLI的最新版本），我們將執行此操作：

>

然後訪問http：// localhost：4200/。如果一切順利，您應該看到工作的todo應用程序。

設置REST API後端
>讓我們使用JSON服務器快速設置模擬後端。 >

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

從應用程序的根部運行：

>

接下來，在我們應用程序的根目錄中，創建一個名為db.json的文件，其中包含以下內容：

>最後，將腳本添加到package.json開始我們的後端：>
我們現在可以使用以下方式啟動REST API後端

<span>npm install json-server --save
</span>

這應該顯示以下內容：

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

就是這樣！現在，我們在端口3000上有一個REST API後端。

>要驗證您的後端是否按預期運行，您可以將瀏覽器導航到http：// localhost：3000。

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

支持以下端點：
• get /todos：獲取所有現有的todos
• get /todos /：id：獲得現有的todo
• post /todos：創建一個新的todo
• put /todos /：id：更新現有的todo
• delete /todos /：id：刪除現有的todo

>因此，如果您將瀏覽器導航到http：// localhost：3000/todos，則應看到DB.JSON的所有Todos的JSON響應

>要了解有關JSON服務器的更多信息，請確保使用JSON-Server查看模擬REST API。

存儲API URL

>現在我們已經有了後端，我們必須將其URL存儲在Angular應用程序中。

理想情況下，我們應該能夠這樣做：
>將URL存儲在一個地方，這樣我們只需要在需要更改其值>時就更改一次

使我們的應用程序在開發過程中連接到開發API，並連接到生產中的生產API。

幸運的是，Angular CLI支持環境。默認情況下，有兩個環境：開發和生產，都帶有相應的環境文件：src/emoverments/emoverument.ts和'src/emoventments/emoveruments.prod.ts。
1. >讓我們將API URL添加到兩個文件中：
這將允許我們通過以下方式從我們的角度應用中獲取環境中的API URL
>當我們運行NG服務或NG構建時，Angular CLI使用開發環境中指定的值（SRC/Environments/Environment.TS）。

但是，當我們運行ng服務 - 環境產品或ng構建 - 環境產品時，Angular CLI使用SRC/Environments/Environment.prod.ts。

中指定的值

<span>npm install -g @angular/cli@latest
</span>

這正是我們需要使用不同的API URL進行開發和生產，而不必更改我們的代碼。

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

>

>

本文系列中的應用程序未託管在生產中，因此我們在開發和生產環境中指定了相同的API URL。這使我們能夠運行NG服務 - 環境產品或NG構建 - 環境在當地生產，以查看一切是否按預期工作。

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

>您可以在.angular-cli.json中找到Dev和Prod之間的映射及其相應的環境文件：

>您還可以通過添加鍵來創建其他環境，例如分期：>

並創建相應的環境文件。

要了解有關角CLI環境的更多信息，請確保查看“終極角CLI參考指南”。 >現在我們將API URL存儲在環境中，我們可以創建一個角度服務以與REST API後端進行通信。

創建服務以與REST API後端通信
>讓我們使用Angular CLI創建一個Apiservice與我們的REST API後端進行通信：

<span>npm install json-server --save
</span>

>這給出以下輸出：

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

<span>npm install -g @angular/cli@latest
</span>

-module app.module.ts選項中定義的Angular模塊中註冊它為提供商 >讓我們打開src/app/api.service.ts： 接下來，我們注入環境和Angular的內置HTTP服務：

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

在我們實施所需的方法之前，讓我們看看Angular的HTTP服務。

>

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

如果您不熟悉語法，為什麼不購買我們的高級課程，介紹Typescript。

Angular HTTP服務

Angular HTTP服務可作為 @angular/http的注射類別提供 >它構建在XHR/JSONP之上，並為我們提供了一個HTTP客戶端，我們可以使用該客戶端從Angular應用程序中提出HTTP請求。

可用於執行HTTP請求的以下方法：
刪除（url，選項）：執行刪除請求
get（url，選項）：執行get request
head（url，選項）：執行頭部請求
>選項（url，選項）：執行選項請求
• 補丁（URL，車身，選項）：執行補丁請求
• post（url，正文，選項）：執行郵政請求
• put（url，身體，選項）：執行put請求。
• 這些方法中的每一種都返回RXJS可觀察的。
> 與AngularJS 1.x HTTP服務方法相反，返回承諾的Angular HTTP服務方法返回可觀察到。
• >如果您還不熟悉RXJS可觀察物，請不要擔心。我們只需要基礎知識即可啟動並運行我們的應用程序。當您的應用程序需要時，您可以逐漸了解有關可用運營商的更多信息，而Reactivex網站則提供了很棒的文檔。
>
• >
如果您想了解有關可觀察到的更多信息，也可能值得查看SitePoint使用RXJS的功能反應性編程介紹。
• >
實施Apiservice方法
如果我們回想起端點，我們的REST API後端會公開：

get /todos：獲取所有現有的todos

get /todos /：id：獲取現有的todo

>

post /todos：創建一個新的todo

• put /todos /：id：更新現有的todo

> 態

• 我們已經可以創建我們需要的方法的粗略輪廓及其相應的角度HTTP方法：

• >讓我們仔細看一下每個方法。

  >

  getalltodos（）
• getalltodos（）方法允許我們從API中獲取所有招待：

首先，我們提出請求從我們的API中獲取所有Todos：>

• 這將返回可觀察的。

  然後，我們在可觀察的上調用映射（）方法，以將響應從API轉換為todo對象的數組：

<span>npm install -g @angular/cli@latest
</span>

>傳入的HTTP響應是一個字符串，因此我們首先調用響應。

然後，我們循環瀏覽API響應的招待，然後返回一系列TODO實例。請注意，映射（）的第二次使用是使用array.prototype.map（），而不是rxjs operator。

>最後，我們將一個錯誤處理程序附加到記錄潛在錯誤到控制台：>

我們在單獨的方法中定義了錯誤處理程序，因此我們可以以其他方法重複使用：

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

>在運行此代碼之前，我們必須從RXJS庫中導入必要的依賴項：>

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

請注意，RXJS庫很大。與其使用“ rxjs/rx”中的import * as rx導入整個RXJS庫，不如說僅導入所需的零件。這將實質上將所得代碼捆綁包的大小減少到最低。 >

在我們的應用程序中，我們導入可觀察的類：

<span>npm install json-server --save
</span>

我們導入代碼所需的三個運算符：

>進口操作員確保我們可觀察的實例與它們附加了相應的方法。

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

如果我們在代碼中沒有導入的'rxjs/add/operator/map'，則以下內容將行不通：

>

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

這是因為this.http.get返回的可觀察的可觀察到不會有map（）方法。

>

>我們只需要一次導入操作員即可在您的應用程序中在全球範圍內啟用相應的可觀察方法。但是，多次導入它們並不是問題，也不會增加由此產生的捆綁包大小。

>

<span>npm run json-server
</span>

getTodobyId（）
getTodobyId（）方法允許我們獲得一個todo：

>

我們在應用程序中不需要這種方法，但是它包括您的外觀。

>

createTodo（）

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

createTodo（）方法允許我們創建一個新的todo：
>我們首先對我們的API執行郵政請求，並將數據傳遞為第二個參數：>

然後，我們將響應轉換為一個todo對象：

updateTodo（）

<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span>  production<span>: false,
</span>
  <span>// URL of development API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

updateTodo（）方法允許我們更新單個todo：>

<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span>  production<span>: true,
</span>
  <span>// URL of production API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

>我們首先對API執行PUT請求，並將數據傳遞為第二個參數：>

然後，我們將響應轉換為一個todo對象：

<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>

> deletetodobyid（）

deletetodobyid（）方法允許我們刪除單個todo：>

<span>"environments": {
</span>  <span>"dev": "environments/environment.ts",
</span>  <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>

我們首先對API執行刪除請求：
然後，我們將響應轉換為null：

<span>"environments": {
</span>  <span>"dev": "environments/environment.ts",
</span>  <span>"staging": "environments/environment.staging.ts",
</span>  <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>

>我們真的不需要在這裡改變響應，並且可以忽略這一行。僅包括您在執行刪除請求時API返回數據時如何處理響應的方法。

ng generate <span>service Api --module app.module.ts
</span>

這是我們的apiservice的完整代碼：

<span>npm install -g @angular/cli@latest
</span>

>現在我們已經有了Apiservice，我們可以使用它來讓我們的TodoDataservice與我們的REST API後端進行通信。

更新tododataservice
當前我們的tododataservice將所有數據存儲在存儲器中：>
>讓我們的TodoDataservice與我們的REST API後端進行通信，我們必須注入新的Apiservice：

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

我們還更新了其方法，將所有工作委派給了Apiservice中的相應方法：

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

我們的新方法實現看起來要簡單得多，因為數據邏輯現在由REST API後端處理。 但是，有一個重要的區別。舊方法包含同步代碼，並立即返回一個值。更新的方法包含異步代碼並返回可觀察的代碼。

>

<span>npm install json-server --save
</span>

這意味著我們還必須更新調用tododataservice方法的代碼，以正確處理可觀察物。

>更新AppComponent

當前，AppComponent期望TodoDataservice直接返回JavaScript對象和數組：

，但是我們的新Apiservice方法返回可觀察的。

>與承諾相似，可觀察物質本質上是異步的，因此我們必須更新代碼以相應地處理可觀察的響應：

如果我們當前在todos（）中撥打tododataservice.getalltodos（）方法：

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

tododataservice.getalltodos（）方法調用相應的apiservice.getAllTodos（）方法：

>
此反過
但是，我們必須記住一件事！

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

>

只要我們不訂閱可觀察到的可觀察到的返回：>

<span>npm run json-server
</span>

沒有提出實際的HTTP請求。

>

要訂閱可觀察的可觀察，我們可以使用subscribe（）方法，該方法採用三個參數：

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

> onnext：可觀察到新值

時稱為一個函數

> onerror：可觀察到錯誤

<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span>  production<span>: false,
</span>
  <span>// URL of development API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

時稱為的函數

oncompleted：可觀察到的函數在可觀察到優雅終止時稱為。

>
讓我們重寫我們當前的代碼：
這將在初始化appComponent時加載todos異步：
• >
• 首先，我們定義了一個公共屬性，todos，並將其初始值設置為空數組。
然後，我們使用ngoninit（）方法來訂閱this.tododataservice.getalltodos（），當一個值出現時，我們將其分配給this.todos，覆蓋其空陣列的初始值。 >
>
現在，讓我們更新onaddtodo（todo）方法，也可以處理可觀察的響應：

<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span>  production<span>: true,
</span>
  <span>// URL of production API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

>再次，我們使用subscribe（）方法來訂閱this.tododataservice.addtodo（todo）的可觀察到的可觀察到的，當響應進來時，我們將新創建的todo添加到當前的todos列表中。 >

我們對其他方法重複相同的練習，直到我們的AppComponent看起來像這樣：>

就是這樣；現在，所有方法都能夠處理由TodoDataservice方法返回的可觀察物。

<span>npm install -g @angular/cli@latest
</span>

>

請注意，當您訂閱Angular HTTP服務返回的可觀察到的可觀察到的時，無需手動訂閱。 Angular將清理所有內容，以防止記憶洩漏。

>讓我們看看一切是否按預期工作。

嘗試

打開一個終端窗口。
從我們的應用程序目錄的根目錄中，啟動RELT API後端：>
打開第二個終端窗口。
再次，從我們的應用程序目錄的根目錄中，服務角應用程序：
現在，將您的瀏覽器導航到http：// localhost：4200。

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

如果一切順利，您應該看到以下內容：

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

如果您看到錯誤，則可以將代碼與GitHub上的工作版本進行比較。

太棒了！我們的應用程序現在正在與REST API後端進行通信！

>

>側提示：如果要運行NPM運行json服務器，並且在同一終端中使用NG，則可以同時使用兩個命令，而無需打開多個終端窗口或選項卡。

>讓我們進行單元測試，以驗證一切都按預期工作。

運行我們的測試

打開第三個終端窗口。

再次，從應用程序目錄的根目錄中，運行單元測試：> 似乎有11個單位測試失敗：

>讓我們看看為什麼我們的測試失敗以及如何修復它們。

修復我們的單元測試
首先，讓我們打開src/todo-data.service.spec.ts：

>大多數失敗的單元測試都與檢查數據處理有關。這些測試不再需要，因為現在我們的REST API後端而不是TodoDataService執行數據處理，因此，讓我們刪除過時的測試：>

<span>npm install json-server --save
</span>

如果我們現在運行單元測試，我們會發現一個錯誤：

>

由於testbed.configuretestingmodule（）創建了用於測試的臨時模塊，因此引發了錯誤。

要使噴油器意識到Apiservice，我們必須通過將Apiservice列為配置對像中的提供商，並將其傳遞給testbed.configuretestingmodule（）：

>

但是，如果這樣做，我們的單位測試將使用我們的真實Apiservice，該Apiservice連接到我們的REST API後端。

>我們不希望我們的測試跑步者在運行單元測試時連接到真正的API，因此讓我們創建一個Apimockservice來模擬單元測試中的真實Apiservice。

創建一個apimockservice

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

>讓我們使用Angular CLI生成新的Apimockservice：

<span>npm install -g @angular/cli@latest
</span>

這顯示了以下內容：

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

接下來，我們實現了與Apiservice相同的方法，但是我們讓這些方法返回模擬數據而不是做出HTTP請求：>

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

請注意，每種方法如何返回新的新模擬數據。這似乎有些重複，但這是一個很好的做法。如果一個單位測試會更改模擬數據，則更改將永遠不會影響另一個單元測試中的數據。

>現在我們有了Apimockservice服務，我們可以用Apimockservice在單位測試中代替Apiservice。

讓我們打開src/todo-data.service.spec.ts。

在提供商數組中，我們告訴注射器在請求apiservice時提供Apimockservice：

如果我們現在重新運行單元測試，則錯誤消失了。太好了！
>我們仍然還有兩個失敗的測試：

<span>npm install json-server --save
</span>

>
錯誤與我們剛剛固定的錯誤相似。

>

要修復第一個錯誤，讓我們打開src/api.service.spec.ts：

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

測試失敗，沒有消息為HTTP！的提供商，這表明我們需要為HTTP添加提供商。
再次，我們不希望HTTP服務發送真實的HTTP請求，因此我們實例化了使用Angular的模型後衛的模擬HTTP服務：

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

不用擔心是否配置測試模塊看起來有些不知所措。

>您可以在官方文檔中了解有關Angular應用程序的官方文檔中設置單元測試的更多信息。

修復最終錯誤：

<span>npm run json-server
</span>

>讓我們打開src/app.component.spec.ts：

然後，向注射器提供我們的模擬apiservice：

歡呼！我們所有的測試都通過：

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span>  production<span>: false,
</span>
  <span>// URL of development API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

我們已經成功地將Angular應用程序連接到了REST API後端。

要將我們的應用程序部署到生產環境中，我們現在可以運行：>

<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span>  production<span>: true,
</span>
  <span>// URL of production API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

>我們還將生成的DIST目錄上傳到我們的託管服務器。那有多甜？

>

讓我們回顧一下我們學到的東西。

摘要

在第一篇文章中，我們學會瞭如何：

>使用Angular Cli

初始化我們的TODO應用程序

<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>

創建一個todo類來表示單個todos
>創建一個TodoDataservice服務，以創建，更新和刪除todos
使用AppComponent組件顯示用戶界面
>將我們的應用程序部署到github頁面。
在第二篇文章中，我們重構AppComponent將其大部分工作委派給：>
todolistComponent顯示todos
• 的列表
a todolistitemComponent顯示一個單todo
todolistheadercomponent創建一個新的todo
todolistFooterComponent顯示剩下多少個毒品。
• >
在第三篇文章中，我們：

>

• 創建模擬REST API後端
• 將API URL作為環境變量存儲
創建一個Apiservice，以與REST API後端進行通信
更新了使用新的Apiservice
• 的TodoDataservice
更新了AppComponent以處理異步API調用
創建一個apimockservice，以避免運行單元測試時真正的http調用。
在此過程中，我們學會了：
如何使用環境變量存儲應用程序設置
>如何使用Angular HTTP客戶端執行HTTP請求
>如何處理Angular HTTP客戶端返回的可觀察物
• 如何模擬HTTP調用以避免運行單元測試時的真實HTTP請求。
本文中的所有代碼均可在GitHub上找到。
>

在第四部分中，我們將介紹路由器和重構AppComponent，以使用路由器從後端獲取煙多。

>

在第五部分中，我們將實施身份驗證以防止未經授權訪問我們的應用程序。

>

本文是由Vildan Softic審查的。感謝SitePoint所有的同行評審器製作SitePoint內容的最佳功能！

>經常詢問有關Angular和RXJS API服務的問題（常見問題解答）

> rxjs在Angular API服務中的作用是什麼？

rxjs，用於JavaScript的反應性擴展的縮寫，是一個用於使用可觀察力的反應性編程的庫，以使基於異步或回調更容易組成基於異步或回調的庫代碼。在Angular API服務的背景下，RXJS在處理異步操作中起著至關重要的作用。它提供了一種創建和使用可觀察到的方法，從而可以管理多個異步操作，處理錯誤，甚至取消操作。這使其成為使用HTTP請求的功能強大的工具，它們本質上是異步的。
> Angular如何與REST後端交互？
Angular通過HTTPCLCLIENT模塊與REST後端相互作用。該模塊為HTTP功能提供了簡化的API。它允許Angular向服務器提出HTTP請求，發送用戶數據或從服務器檢索數據。 HTTPCLIENT模塊還包括用於get，post，put，delete等請求的方法，它們對應於Restful API中使用的HTTP方法。 錯誤處理是任何應用程序的重要組成部分。在Angular API服務中，您可以使用RXJS的Catherror操作員處理錯誤。該操作員在可觀察到的錯誤上捕獲錯誤，並允許您處理或返回新的可觀察到的錯誤。您可以在可觀察的管道方法中使用它，在可能丟棄錯誤的方法之後。

>如何在Angular API服務中取消請求？ >

我如何在Angular API服務中重試失敗的請求？ ，您可以使用RXJS的操作員重試或重試失敗的請求。重試操作員重新提交可觀察到的，有效地重複HTTP請求。重試的操作員允許您定義重試該請求的條件。 在Angular API服務中，您可以使用HTTPCLIENT模塊的PUT方法更新服務器上的數據。此方法將服務器的URL，要更新的數據以及請求作為參數的選項，並返回可觀察的可訂閱的可觀察到。 Angular API Service？

在Angular API服務中，您可以使用HTTPCLIENT模塊的刪除方法從服務器刪除數據。此方法將服務器的URL和請求作為參數的選項，並返回可以訂閱的可觀察的。

以上是Angular和RXJS：添加REST API後端的詳細內容。更多資訊請關注PHP中文網其他相關文章！