如何在 Angular 中调用 REST API？

当我们利用Angular框架开发Web应用程序时，经常会涉及到调用各种REST API。本文将深入探讨这一主题。由于文章将包含代码示例，建议您对HTTP协议、HTML、TypeScript以及Angular框架有一定的了解。首先，我们来快速回顾一下Angular中的服务和依赖注入机制。

REST API简介

RESTful API 是一种符合 REST 的设计原则或具象状态传输 架构风格的 API，又称为REST API。简单的说，REST就是客户端按照约定向服务端请求指定数据、或者在服务端保存数据，服务端响应客户端请求的过程。

RESTful API 已经是在线开放API实施上的事实标准，企业API开放平台大多都会采用OpenAPI做为RESTful API的API描述规范，以此来支持市面上 大部分 API生态相关的工具。一个设计良好的开放API，不仅能够有效规避API安全漏洞，还能借助开放API平台实现API的货币化，成为企业营收的重要来源。

依赖注入简介

依赖注入（Dependency Injection，简称DI）是一种设计模式，它允许将组件所需的依赖项（如服务、数据模型等）自动传递给组件，从而减少组件之间的耦合，并提高代码的可测试性和可维护性。在Angular框架中，依赖注入是通过内置的依赖注入系统实现的，该系统使用装饰器和反射API来实现。

在Angular中，依赖注入的核心概念包括：

1. 服务（Service）：一个服务是一个包含业务逻辑的类，它可以被多个组件共享和重用。服务通常使用@Injectable()装饰器标记，以表明它可以被注入到组件或其他服务中。
2. 提供者（Provider）：提供者是Angular用来创建服务实例的对象。在Angular中，服务本身就是提供者。通过在服务类上使用@Injectable()装饰器，并指定提供者的元数据，Angular可以自动创建服务实例并将其注入到需要它的组件中。
3. 注入器（Injector）：注入器是一个负责创建服务实例的对象。Angular有一个层次化的注入器系统，每个组件都有一个与之关联的注入器。当组件请求一个服务时，其注入器会尝试创建或提供该服务的实例。
4. 依赖（Dependency）：依赖是组件所需的任何外部资源，如服务、数据模型等。在Angular中，组件可以通过构造函数、属性或方法注入依赖项。

依赖注入的过程通常如下：

1. 定义服务：创建一个服务类，并使用@Injectable()装饰器标记。
2. 注册服务：在模块（如NgModule）中声明服务，使其成为提供者。
3. 注入服务：在组件或服务中通过构造函数注入所需的服务。

以下是一个简单的Angular依赖注入示例：

import { Injectable } from '@angular/core';



@Injectable({

  providedIn: 'root'

})

export class DataService {

  getData() {

    return 'Some data';

  }

}



import { Component } from '@angular/core';

import { DataService } from './data.service';



@Component({

  selector: 'app-my-component',

  template: `<p>{{ data }}</p>`

})

export class MyComponent {

  data: string;



  constructor(private dataService: DataService) {

    this.data = this.dataService.getData();

  }

}

在这个例子中，DataService是一个可注入的服务，它提供了一个getData方法。在MyComponent组件中，我们通过构造函数注入了DataService，并使用它来获取数据。

通过依赖注入，Angular允许组件和服务之间的松耦合，使得代码更加模块化和易于维护。

Angular服务简介

在实际的应用开发中，多个组件可能需要从外部数据源获取信息。Angular服务，由TypeScript类构成，可以作为统一的、可复用的数据访问层。通过在可注入的服务类中封装数据访问逻辑，我们能够使任何组件都能便捷地调用这些逻辑。

Angular中的REST API调用

在Angular中实现REST API调用的详细步骤和代码示例如下：

1. 创建Angular服务：
   使用Angular CLI工具生成服务：

ng generate service RESTAPIService

1. 服务类代码 (restapi.service.ts)：

import { Injectable } from '@angular/core';

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

import { Observable } from 'rxjs';



@Injectable({

  providedIn: 'root'

})

export class RESTAPIService {

  private apiUrl = 'http://localhost:3000/blogs';



  constructor(private http: HttpClient) {}



  postBlog(blog: any): Observable<any> {

    const headers = { 'Content-Type': 'application/json' };

    return this.http.post(this.apiUrl, blog, { headers });

  }

}

1. 在组件中注入服务 (postblog.component.ts)：

import { Component, OnInit } from '@angular/core';

import { RESTAPIService } from './restapi.service';

import { Router } from '@angular/router';



@Component({

  selector: 'app-postblog',

  templateUrl: './postblog.component.html',

  styleUrls: ['./postblog.component.css']

})

export class PostblogComponent implements OnInit {

  blog = {

    title: '',

    snippet: '',

    body: ''

  };



  constructor(private apiService: RESTAPIService, private router: Router) {}



  ngOnInit(): void {}



  saveBlog() {

    this.apiService.postBlog(this.blog).subscribe({

      next: (response) => {

        console.log('Blog posted successfully', response);

        this.router.navigate(['/view-blogs']);

      },

      error: (error) => {

        console.error('Error posting blog', error);

      }

    });

  }

}

1. Angular表单HTML模板 (postblog.component.html)：

<form (ngSubmit)="saveBlog()">

  <label for="title">Enter Title:</label>



  <input type="text" id="title" [(ngModel)]="blog.title" name="title" required>



  <label for="snippet">Blog Snippet:</label>



  <input type="text" id="snippet" [(ngModel)]="blog.snippet" name="snippet" required>



  <label for="body">Blog Body:</label>



  <textarea id="body" [(ngModel)]="blog.body" name="body" required></textarea>



  <button type="submit">Submit</button>



</form>

1. 引入HttpClientModule：
   在应用的根模块（通常是app.module.ts）中引入HttpClientModule：

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { PostblogComponent } from './postblog/postblog.component';



@NgModule({

  declarations: [

    AppComponent,

    PostblogComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

通过这些步骤和代码示例，你可以在Angular应用中实现REST API调用，从而与后端服务进行有效的数据交互。