如何在 Angular 應用程序中調用 API

簡介：為什麼 API 調用在 Angular 應用程序中很重要

在現代網絡上，很少能找到獨立運行的應用程序。 大多數應用程序與服務器通信以獲取、存儲或操作數據，這就是 API 調用發揮作用的地方。

讓我們舉幾個現實世界的例子來說明這一點。

例如，考慮一個旅行預訂應用程序。 在這裡，Angular API 調用用於從不同的 API 檢索航班信息、酒店可用性或天氣預報。 然後將從這些 API 獲取的數據動態顯示給用戶，提供無縫的瀏覽體驗。

另一個示例可能是電子商務應用程序，其中調用 API 來獲取產品詳細信息、用戶信息以及管理購物車。 應用程序對服務器端 API 進行 API 調用，服務器端 API 可能與數據庫交互以獲取和存儲信息。

在 Angular 應用程序中，進行 API 調用對於將應用程序與服務器端資源連接起來至關重要，從而使應用程序能夠與後端服務進行交互。 因此，了解如何在 Angular 中調用 API 是任何 Angular 開發人員的一項基本技能。

查看我們的免費課程，在競爭中脫穎而出。

為 API 調用設置 Angular 環境

在我們深入研究 Angular API 調用過程之前，讓我們首先設置我們的 Angular 環境。

確保您的系統中安裝了 Node.js 和 npm（節點包管理器）。 然後，使用 npm 全局安裝 Angular CLI（命令行界面）。 這個 CLI 將幫助我們毫不費力地創建和管理我們的 Angular 項目。

npm 安裝-g @angular/cli

現在，創建一個新的 Angular 項目：ng new my-api-project

ng 新的 my-api-project

導航到項目目錄：cd my-api-project

cd 我的 api 項目

查看 upGrad 的軟件開發課程來提高自己的技能。

理解 Angular 中的 HTTP：HttpClient 模塊

要在 Angular 中進行 API 調用，我們主要使用 HttpClient 模塊。 該模塊通過為 HTTP 請求提供簡化的 API 來簡化 Angular 應用程序中的 API 集成。 首先在您的 app.module.ts 中導入 HttpClientModule：

從'@angular/common/http'導入{HttpClientModule}；

@NgModule({

進口：[

// 這裡有其他導入

HttpClientModule

],

})

發出簡單的 GET 請求：從 API 檢索數據

Angular 中最常見的API 調用類型是 GET 請求，它用於從服務器檢索數據。 在您的組件中導入 HttpClient 並通過構造函數注入它。 然後，使用 get() 方法從 API 獲取數據：

從'@angular/common/http'導入{HttpClient}；

導出類 AppComponent {

構造函數（私有 http: HttpClient）{ }

獲取數據（）{

this.http.get('https://api.example.com/data').subscribe(data => {

控制台日誌（數據）；

});

}

}

處理 API 調用中的錯誤和異常

在 Angular 中使用 API 調用時，您應該始終預見到錯誤和異常。 HttpClient 模塊返回一個 Observable。 您可以使用 RxJS 中的 catchError 運算符來優雅地處理錯誤：

從'rxjs/operators'導入{catchError}；

從'rxjs'導入{throwError}；

獲取數據（）{

this.http.get('https://api.example.com/data').pipe(

catchError（錯誤=> {

console.error('發生錯誤：', error);

返回 throwError（錯誤）；

})

).subscribe(數據 => {

控制台日誌（數據）；

});

}

發出 POST 請求：向 API 發送數據

正如我們可以使用 GET 請求檢索數據一樣，我們也可以使用 POST 請求將數據發送到 API。 當我們需要將數據從 Angular 應用程序發送到服務器時，這種類型的Angular API 調用至關重要：

發布數據（） {

const body = { title: 'Angular Post', content: '發送數據到 API' };

this.http.post('https://api.example.com/posts', body).subscribe(response => {

控制台日誌（響應）；

});

}

使用 API 調用上傳文件：使用 FormData 對象

要在 Angular 的 API 調用中上傳文件，我們可以使用 FormData 對象，它允許我們將鍵值對作為表單數據發送：

上傳文件（文件：文件）{

const formData = new FormData();

formData.append('文件', 文件);

this.http.post('https://api.example.com/upload', formData).subscribe(response => {

控制台日誌（響應）；

});

}

在 API 調用中使用查詢參數

查詢參數是 Angular 中 API 調用的重要組成部分，通常用於過濾或排序數據。 HttpClient 模塊提供了一種向請求添加查詢參數的簡單方法：

獲取數據（）{

this.http.get('https://api.example.com/data', {

參數：{

升序'，

限制：'10'

}

}).subscribe(數據 => {

控制台日誌（數據）；

});

}

緩存數據以獲得更好的性能：使用 HTTP 攔截器

緩存數據可以顯著提高 Angular 應用程序的性能。 這就是 HTTP 攔截器發揮作用的地方。 它們允許您攔截 HTTP 請求和響應，這是實施緩存策略的完美場所。 您可以在 Angular 的 Web Worker 中使用 Angular LocalStorage 或 IndexedDB 來存儲緩存。

@Injectable()

導出類 CacheInterceptor 實現 HttpInterceptor {

constructor(private cache: CacheService) {} //假設你有一個緩存服務

攔截（請求：HttpRequest<任何>，下一個：HttpHandler）：Observable<HttpEvent<任何>> {

const cachedResponse = this.cache.get(req);

如果（緩存響應）{

返回（cachedResponse）；

}

返回 next.handle(req).pipe(

點擊（事件=> {

如果（HttpResponse 事件實例）{

this.cache.put(req, event);// 更新緩存。

}

})

);

}

}

在 Angular 中測試 API 調用：使用 HttpClientTestingModule 模擬 HTTP 請求

測試是 Angular API 集成的一個重要方面。 為了測試我們的 API 調用，Angular 提供了 HttpClientTestingModule。 這個模塊允許我們模擬 HTTP 請求，使我們能夠在沒有實際 API 調用的情況下單獨測試我們的組件和服務：

從'@angular/common/http/testing'導入{HttpClientTestingModule，HttpTestingController}；

beforeEach(() => {

TestBed.configureTestingModule({

導入：[HttpClientTestingModule]，

});

httpMock = TestBed.inject(HttpTestingController);

});

it('應該發出 GET 請求', () => {

service.fetchData().subscribe();

const req = httpMock.expectOne('https://api.example.com/data');

期望（req.request.method）.toEqual（'GET'）;

req.flush({ data: '測試數據' });

});

在 Angular 應用程序中進行 API 調用時要牢記的提示

在 Angular 中進行 API 調用似乎很簡單，但細微差別會顯著影響應用程序的性能和可靠性。 以下是一些需要牢記的重要提示：

1. 使用 HttpClient： HttpClient 模塊是 Angular API 調用的強大工具。它為 HTTP 請求提供了一個簡化的 API，並抽像出了發出請求的潛在復雜性。
2. 優雅地處理錯誤：始終預料到 Angular 中的 API 調用可能會出錯。使用 RxJS 中的 catchError 運算符來處理 API 調用期間的任何潛在錯誤。
3. 優化 API 調用：避免進行不必要的 API 調用。利用 Angular LocalStorage 或緩存來存儲您可能需要重複使用的數據。 這減少了服務器上的負載並提高了應用程序性能。
4. 在 Angular 中使用 Web Worker 處理繁重的任務：如果您要處理繁重的計算任務或大容量數據，請考慮在 Angular 中使用 Web Worker。這將確保您的 UI 保持流暢和響應，因為任務將被卸載到單獨的後台線程。
5. 保護您的 API 調用：安全是最重要的。確保為 Angular API 調用使用安全協議（如 HTTPS）。 此外，不要在客戶端代碼中公開 API 密鑰等敏感數據。
6. 測試您的 API 調用：測試對於 Angular API 集成至關重要。使用 HttpClientTestingModule 模擬 HTTP 請求並確保您的 API 調用按預期工作。
7. 保持更新： Angular 是一個不斷發展的框架。始終了解最新版本和更新，以進行最高效、最安全的 API 調用。

請記住，有效地集成 API 調用可以使您的 Angular 應用程序更具動態性和響應性，從而增強用戶體驗和整體功能。

探索我們的熱門軟件工程課程

通過 upGrad 課程擴展您的技能

隨著您在 Angular 中掌握 API 調用的過程中取得進展，您可能正在考慮如何進一步提升您的技能。 為了幫助完成這項工作，一些綜合性的在線課程深入探討了 Angular 並涵蓋了軟件開發的其他關鍵方面。 其中一個平台是 upGrad，以其高質量和與行業相關的程序而聞名。

讓我們看看一些可以幫助您將知識提升到新水平的課程。

全棧開發人員課程 (PGD – IIITB)

由 upGrad 提供的IIITB 全棧開發執行 PG 計劃是一個綜合計劃，可帶您完成從基礎到全棧開發高級方面的旅程。 該課程深入介紹了 Angular 以及其他前端和後端技術。 如果您渴望成為一名熟練的全棧開發人員，那麼本課程可能是您的下一個重要步驟。

軟件工程 (MCS – LJMU)

另一門可能會引起您興趣的課程是LJMU 的計算機科學理學碩士。 本課程不僅會提高您的編碼技能，還會為您提供有效管理軟件項目的知識。

探索我們的軟件開發免費課程

全棧開發訓練營

對於那些尋求快節奏、強化學習之旅的人，upGrad 提供了全棧軟件開發訓練營。 該訓練營將為您提供構建綜合 Web 應用程序所需的知識和技能，並廣泛關注 Angular 等前端技術。

結論

至此，你應該對如何在 Angular 中調用 API有了一定的了解。 從設置環境到發出 GET 和 POST 請求、處理錯誤、使用查詢參數、緩存響應以獲得更好的性能，甚至測試，您現在已經具備在 Angular 中有效處理 API 集成的能力。

在我們總結時，值得注意的是，持續學習和技能發展是在快速發展的科技行業中保持相關性的關鍵。 這就是像 UpGrad 這樣的平台進來的地方。

UpGrad 提供範圍廣泛的課程，旨在為您提供必要的技能和知識，讓您在技術職業生涯中脫穎而出。 所以，不要停留在這篇文章上。 繼續探索並考慮參加 UpGrad 的綜合課程之一，以開闢一個充滿機遇的世界。

請記住，在 Angular 中進行 API 調用不僅僅是獲取數據； 它是關於創建流暢的用戶體驗和構建高效的應用程序。 不斷磨練您的技能並保持領先地位。 快樂學習！