65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Angular 9 构建和消费 REST API：通过示例使用 HttpClient 和服务发送 GET 请求

Ahmed Bouchefra
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2020 年 1 月 6 日

CPOL

5分钟阅读

viewsIcon

12930

如何使用 json-server 和 faker 为我们的 Angular 前端构建一个假的 REST API 后端

在我们 Angular 9 教程的这一部分，我们将使用 json-server 和 faker.js 为我们的 Angular 前端构建一个假的 REST API 后端，接下来，我们将看到如何创建一个服务来向我们的后端发送 GET 请求，以获取和消耗数据，这些数据将使用 ngFor 和 ngIf 指令在主页组件中渲染。

这是本部分的内容

什么是 Angular 服务？

我们可以直接从主页组件发送 HTTP 请求，但这并不是推荐的做法——这时 Angular 服务的作用就体现出来了。

Angular 服务是一个 TypeScript 类，它封装了一组相似的功能，例如在你项目的代码中从服务器获取数据。多亏了 Angular 的依赖注入器，它可以被注入到任何其他服务或组件中，并且可以在提供它的模块中重复使用。

我们使用 @Injectable 装饰器将一个 TypeScript 类标记为可注入的，该装饰器还有一个 providedIn 属性，用于指定服务应该在哪个模块中提供。默认情况下，它是 root，它只是 AppModule 的一个别名。

教程步骤 7 — 使用 JSON-Server 模拟一个功能齐全的 REST API

几乎每个前端应用都需要数据，这些数据大多数时候可以从提供 REST API 的后端获取。由于我们的教程是关于使用 Angular 9 进行前端 Web 开发，因此我们需要一个来自 Web 上公共服务器的第三方 REST API，或者更好的是，我们可以使用 json-server 等工具来生成具有假数据的、功能齐全的后端 API。这个过程既快速又容易，让我们开始吧！

打开一个新的命令行界面，然后运行以下命令导航到你的项目文件夹，并从 npm 安装 json-server

$ cd ~/first-angular-app
$ npm install --save json-server

接下来，继续在你的 Angular 项目中创建一个 backend 文件夹

$ mkdir backend

接下来，我们将使用 Faker.js 来生成大量逼真的假数据。

返回你的命令行界面，然后使用以下命令从 npm 安装 Faker.js

$ npm install faker --save

在构建此示例时，faker v4.1.0 将被安装在我们的机器上。

现在，创建一个 init.js 文件并添加以下代码

var faker = require('faker');

var database = { products: []};

for (var i = 1; i<= 300; i++) {
  database.products.push({
    id: i,
    name: faker.commerce.productName(),
    description: faker.lorem.sentences(),
    price: faker.commerce.price(),
    imageUrl: "https://source.unsplash.com/1600x900/?product",
    quantity: faker.random.number()
  });
}

console.log(JSON.stringify(database));

我们首先导入了 faker，然后定义了一个包含一个空数组 products 的对象。接下来，我们进入一个 for 循环，使用 faker 方法（如 faker.commerce.productName() 用于生成产品名称）来创建 300 个假条目。 查看所有可用方法。最后，我们将数据库对象转换为 string 并将其输出到标准输出。

接下来，将 init-api 和 serve-api 脚本添加到 package.json 文件中，如下所示

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "init-api": "node ./backend/init.js > ./backend/data.json",
    "serve-api": "json-server --watch ./backend/data.json"
  },

接下来，转到你的命令行界面，然后运行 init-api 脚本，如下所示

$ npm run init-api

接下来，运行 REST API 服务器

$ npm run init-api

现在你可以像使用任何典型的 REST API 服务器一样使用 REST API。它将可以通过 https://:3000/ 地址访问。

这些是我们通过 REST API 服务器可以使用的 API 端点

  • GET /products 获取产品
  • GET /products/<id> 按 id 获取单个产品
  • POST /products 创建新产品
  • PUT /products/<id> 按 id 更新产品
  • PATCH /products/<id> 按 id 部分更新产品
  • DELETE /products/<id> 按 id 删除产品

你可以使用 _page 和 _limit 参数来获取分页数据。在 Link 头部，你将获得 first、prev、next 和 last 链接。

如果你成功完成了此步骤，你应该已经拥有一个正在运行的 REST API 服务器，你可以从你的 Angular 9 前端连接到它。恭喜，你已准备好进入下一步！

教程步骤 8 — 使用 Angular 9 HttpClient 发送 HTTP 请求

在这一步中，我们将使用 Angular HttpClient 和一个服务来发送 HTTP GET 请求，从我们的 REST API 服务器获取数据。

我们需要创建一个 Angular 服务来封装允许我们从 REST API 服务器消费数据的代码。

创建 Angular 9 服务

打开你的命令行界面，然后运行以下命令

$ ng generate service api

接下来，进入 src/app/api.service.ts 文件，导入并注入 HttpClient

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private SERVER_URL = "https://:3000";

  constructor(private httpClient: HttpClient) { }
}

我们通过服务构造函数导入并注入了 HttpClient 服务，并定义了 SERVER_URL 变量，它包含了我们本地运行的 REST API 服务器的地址。

发送 HTTP 请求

接下来，定义一个 fetchData() 方法，该方法简单地向产品 REST API 端点（即 /products）发送一个 HTTP GET 请求

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';

@Injectable({  
	providedIn: 'root'  
})  
export class ApiService {

	private SERVER_URL = "https://:3000";
	constructor(private httpClient: HttpClient) { }

	public fetchData(){  
		return this.httpClient.get(`${this.SERVER_URL}/products`);  
	}  
}

该方法简单地调用 HttpClient 的 fetchData() 方法来向 REST API 服务器发送 GET 请求。

注入和调用服务

接下来，我们需要在我们的主页组件中使用这个服务。打开 src/app/home/home.component.ts 文件，然后像这样导入并注入 Angular 服务

import { Component, OnInit } from '@angular/core';  
import { ApiService } from '../api.service';

@Component({  
	selector: 'app-home',  
	templateUrl: './home.component.html',  
	styleUrls: ['./home.component.css']  
})  
export class HomeComponent implements OnInit {
	products = [];
	constructor(private apiService: ApiService) { }
	ngOnInit() {
		this.apiService.fetchData().subscribe((data: any[])=>{  
			console.log(data);  
			this.products = data;  
		})  
	}
}

我们导入并注入了 ApiService。接下来，我们定义了一个 products 变量，并调用了服务的方法 fetchData() 来从 REST API 服务器获取数据。

使用 ngFor 渲染获取的数据

接下来，打开 src/app/home/home.component.html 文件并更新它，如下所示

<div style="padding: 13px;">
    <mat-spinner *ngIf="products.length === 0"></mat-spinner>

    <mat-card *ngFor="let product of products" style="margin-top:10px;">
        <mat-card-header>
            <mat-card-title></mat-card-title>
            <mat-card-subtitle> $/ 
            </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p>
                
            </p>
            <img style="height:100%; width: 100%;" src="" />
        </mat-card-content>
        <mat-card-actions>
      <button mat-button> Buy product</button>
    </mat-card-actions>
    </mat-card>
</div>

我们使用 <mat-spinner> 组件来显示加载旋转器，当 products 数组的长度等于零时，即在从 REST API 服务器收到任何数据之前。

接下来，我们遍历 products 数组，并使用 Material 卡片来显示每个产品的 name、price、quantity、description 和 image。

这是 JSON 数据获取后主页的屏幕截图

接下来，我们将学习如何向服务添加错误处理。

总结

在我们 Angular 9 教程的这一部分，我们了解了什么是服务，并创建了一个服务来封装向我们的 REST API 后端发送 HTTP GET 请求以消费数据，并使用 ngFor 指令进行渲染。

© . All rights reserved.