如何在 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 调用不仅仅是获取数据； 它是关于创建流畅的用户体验和构建高效的应用程序。 不断磨练您的技能并保持领先地位。 快乐学习！