如何在Angular中访问REST API？

幂简集成explinks
96 阅读5分钟

随着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';<br>
<br>
@Injectable({<br>
  providedIn: 'root'<br>
})<br>
export class DataService {<br>
  getData() {<br>
    return 'Some data';<br>
  }<br>
}<br>
<br>
import { Component } from '@angular/core';<br>
import { DataService } from './data.service';<br>
<br>
@Component({<br>
  selector: 'app-my-component',<br>
  template: `&lt;p&gt;{{ data }}&lt;/p&gt;`<br>
})<br>
export class MyComponent {<br>
  data: string;<br>
<br>
  constructor(private dataService: DataService) {<br>
    this.data = this.dataService.getData();<br>
  }<br>
}

在这个例子中，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';<br>
import { HttpClient } from '@angular/common/http';<br>
import { Observable } from 'rxjs';<br>
<br>
@Injectable({<br>
  providedIn: 'root'<br>
})<br>
export class RESTAPIService {<br>
  private apiUrl = 'http://localhost:3000/blogs';<br>
<br>
  constructor(private http: HttpClient) {}<br>
<br>
  postBlog(blog: any): Observable&lt;any&gt; {<br>
    const headers = { 'Content-Type': 'application/json' };<br>
    return this.http.post(this.apiUrl, blog, { headers });<br>
  }<br>
}
  1. 在组件中注入服务 (postblog.component.ts)：
import { Component, OnInit } from '@angular/core';<br>
import { RESTAPIService } from './restapi.service';<br>
import { Router } from '@angular/router';<br>
<br>
@Component({<br>
  selector: 'app-postblog',<br>
  templateUrl: './postblog.component.html',<br>
  styleUrls: ['./postblog.component.css']<br>
})<br>
export class PostblogComponent implements OnInit {<br>
  blog = {<br>
    title: '',<br>
    snippet: '',<br>
    body: ''<br>
  };<br>
<br>
  constructor(private apiService: RESTAPIService, private router: Router) {}<br>
<br>
  ngOnInit(): void {}<br>
<br>
  saveBlog() {<br>
    this.apiService.postBlog(this.blog).subscribe({<br>
      next: (response) =&gt; {<br>
        console.log('Blog posted successfully', response);<br>
        this.router.navigate(['/view-blogs']);<br>
      },<br>
      error: (error) =&gt; {<br>
        console.error('Error posting blog', error);<br>
      }<br>
    });<br>
  }<br>
}
  1. Angular表单HTML模板 (postblog.component.html)：
&lt;form (ngSubmit)="saveBlog()"&gt;<br>
  &lt;label for="title"&gt;Enter Title:&lt;/label&gt;<br>
<br>
  &lt;input type="text" id="title" [(ngModel)]="blog.title" name="title" required&gt;<br>
<br>
  &lt;label for="snippet"&gt;Blog Snippet:&lt;/label&gt;<br>
<br>
  &lt;input type="text" id="snippet" [(ngModel)]="blog.snippet" name="snippet" required&gt;<br>
<br>
  &lt;label for="body"&gt;Blog Body:&lt;/label&gt;<br>
<br>
  &lt;textarea id="body" [(ngModel)]="blog.body" name="body" required&gt;&lt;/textarea&gt;<br>
<br>
  &lt;button type="submit"&gt;Submit&lt;/button&gt;<br>
<br>
&lt;/form&gt;
  1. 引入HttpClientModule：
    在应用的根模块（通常是app.module.ts）中引入HttpClientModule：
import { NgModule } from '@angular/core';<br>
import { BrowserModule } from '@angular/platform-browser';<br>
import { HttpClientModule } from '@angular/common/http';<br>
import { AppComponent } from './app.component';<br>
import { PostblogComponent } from './postblog/postblog.component';<br>
<br>
@NgModule({<br>
  declarations: [<br>
    AppComponent,<br>
    PostblogComponent<br>
  ],<br>
  imports: [<br>
    BrowserModule,<br>
    HttpClientModule<br>
  ],<br>
  providers: [],<br>
  bootstrap: [AppComponent]<br>
})<br>
export class AppModule { }

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

avatar
文章
阅读
粉丝