在 Angular 中发布、删除和放入数据
介绍
在本指南中，我们将研究如何在 Angular 中使用 HttpClient 发出 HTTP 请求。
以下是我们接下来几分钟要学习的主要主题：
- HTTP 请求简介
- 使用 API 发出 HTTP 请求
- 使用 HttpClient API 发出 HTTP 请求
HTTP 请求简介
HTTP 请求是从源传输到目的地的信息包，分别称为客户端-服务器。客户端发出 HTTP 请求，服务器将信息发送给客户端。HTTP 有多种请求方法来发出请求，并有多种错误方法来指示错误。
以下是一些常见的 HTTP 请求方法和响应状态代码。
HTTP 请求方法
- OPTIONS - 用于检查服务器所需的所有元数据，以确保 CORS 等安全请求。它会在任何 HTTP 请求之前自动调用。您可以阅读有关OPTIONS 的更多信息。
- GET——用于从服务器获取数据。
- POST——用于将数据发送到服务器。
- PUT——用于更新数据。
- DELETE-用于从服务器删除数据。
响应状态代码
- 200——用于指示 HTTP 请求成功完成时的“OK”消息。
- 404——当 HTTP 在服务器上找不到指定的 URL 时，用于指示“未找到资源”消息。
您可以阅读有关HTTP 响应代码和HTTP 请求方法的更多信息。
使用 API 发出 HTTP 请求
用于发出 HTTP 请求的 API 主要有两种类型。
- XMLHttp请求（XHR）
- 拿来
其他库（例如 Axios 和 HttpClient）在内部使用上述方法之一并抽象这些 API 的复杂性。
您可以阅读有关XMLHttpRequest和Fetch 的更多信息。
使用 HttpClient API 发出 HTTP 请求
@angular/common/http中的 HttpClient为 Angular 应用程序提供了一个简化的客户端 HTTP API，该 API 依赖于浏览器公开的 XMLHttpRequest 接口。
Observable比 Promise 提供更好的性能。如果你不熟悉 Observable，可以在这里阅读有关 Observable 的更多信息。
要在项目中使用 HttpClient，你需要在app.module.ts中导入 HttpClient 。导入后，你的 app.module.ts 文件将如下所示：
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
然后我们需要创建一个服务类，在其中创建发出 HTTP 请求的方法。您可以使用以下命令创建服务：
ng g s httpCrudDemo --skipTests=true
如您所见，我使用了--skipTests=true。因为 Angular 为服务创建了两个文件。一个用于业务逻辑，一个用于单元测试。我现在不打算进行任何单元测试，所以我跳过了测试文件。
我们不会为本指南构建后端 API；我将使用JSONPlaceholder，这是一个可以测试我们的前端应用程序的免费 API。
在编写发出 HTTP 请求的方法之前，我们需要在服务类中创建 httpClient 的变量。
constructor(private httpClient:HttpClient){}
这将实例化 httpClient，以便我们可以使用它来发出 HTTP 请求。
最佳做法是将整个 URL 分成两部分：
- 主 URL 如 https://www.yourserver.com
- /users 等端点
所以最终我们的服务将是这样的：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class HttpCrudDemoService {
url: string;
constructor(private httpClient: HttpClient) {
this.url = "https://jsonplaceholder.typicode.com";
}
在下一节中，我将编写服务方法来创建、读取、更新和删除帖子。
获取所有帖子
public getPosts(){
let endPoints=""
this.httpClient.get(this.url+endPoints).subscribe(data => {
console.log(data);
});
}
HTTP 请求的 GET 方法从服务中获取数据并提供一个对象数组。它只接受一个参数，即后端服务 URL。GET 方法将以 JSON 格式提供我们需要在 typescript 对象中转换的数据。但多亏了 HTTPClient，它可以将数据从 JSON 转换为可观察形式。要从可观察对象中提取数据，我们需要使用 rxjs 的 subscribe 方法，它将以 typescript/javascript 对象的形式提供数据，我们可以在任何其他函数中使用它。
通过 ID 获取帖子
public getPostById() {
let id: number = 1;
let endPoints = "/posts/" + id;
this.httpClient.get(this.url + endPoints).subscribe(data => {
console.log(data);
});
}
在上面的函数中，我获取了一个特定 ID 的数据。在这种情况下，只返回一个对象，而不是一个对象数组。
添加新帖子
public addPost(postData: Object) {
let endPoints = "/posts"
this.httpClient.post(this.url + endPoints, postData).subscribe(data => {
console.log(data);
});
}
POST 方法用于将数据发送到服务器。它需要两个参数，即服务 URL 和请求正文。在许多情况下，服务器会发送对象的 ID 作为响应，以确认您的数据已被服务器处理并且对象已成功创建。
更新帖子
public updatePost(postData: Object) {
let endPoints = "/posts/1"
this.httpClient.put(this.url + endPoints, postData).subscribe(data => {
console.log(data);
});
}
PUT 方法用于更新已保存在数据库中的对象。它还需要两个参数，第一个是 URL，第二个是请求主体。要更新对象，我们需要将 URL 中的对象 ID 作为路由参数传递。
删除帖子
public deletePost() {
let endPoints = "/posts/1"
this.httpClient.delete(this.url + endPoints).subscribe(data => {
console.log(data);
});
}
DELETE 方法只需要具有对象 ID 的 URL。它会检查 ID 并从数据库中删除数据。但在实际应用中，它会软删除数据，这意味着数据不会从服务器永久删除，只是被停用，主要用于报告目的。
要发出 HTTP 请求，您应该始终查找标头，因为在许多情况下，服务器只会接受来自授权客户端的请求。在这种情况下，必须在授权标头中传递授权或访问令牌。
结论
HttpClient 是发出 HTTP 请求的最佳 API 之一。它返回一个 Observable，但如果您想返回一个 Promise，也可以使用 HttpClient 来完成。最佳做法是返回一个 Observable 并在其他函数中订阅它。
这就是本指南的全部内容。我希望您现在已经熟悉 HttpClient。不要再等了——打破 JSONPlaceholder 服务器。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~