将API在角度-DEV365 开发者社区

在角度实现REST API涉及几个步骤：

导入httpclientmodule：Angular带有一个名为httpclientmodule的内置模块，可让您向REST API提出HTTP请求。要使用它，您需要将其导入到角度项目中。打开app.module.ts文件并添加以下代码：

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    HttpClientModule
  ],
  ...
});

export class AppModule { }

创建服务：在Angular中，服务用于封装可以在组件之间共享的数据和功能。创建一个服务来处理API调用。例如，创建一个名为userVice的服务：

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://my-api.com/users';

  constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get(this.apiUrl);
  }

  getUserById(id: number) {
    return this.http.get(`${this.apiUrl}/${id}`);
  }

  addUser(user: any) {
    return this.http.post(this.apiUrl, user);
  }

  updateUser(id: number, user: any) {
    return this.http.put(`${this.apiUrl}/${id}`, user);
  }

  deleteUser(id: number) {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}

在此示例中，UserService具有将所有CRUD操作用于REST API的方法。每种方法都使用HTTPCLIENT服务来制作实际的HTTP请求。

在组件中使用该服务：现在您有一个服务来处理API调用，可以在组件中使用它。例如，创建一个称为userListComponent的组件：


import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <h2>User List</h2>
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers().subscribe((data: any[]) => {
      this.users = data;
    });
  }
}

在此示例中，UserListComponent使用UserService获取API的用户列表并将其显示在模板中。

处理错误：在拨打API呼叫时处理错误很重要。您可以使用RXJS的Catcheror操作员来执行此操作。例如，修改userService的getuserById方法以处理错误：

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

getUserById(id: number) {
  return this.http.get(`${this.apiUrl}/${id}`).pipe(
    catchError((error: any) => {
      console.error(error);
      return throwError('An error occurred');
    })
  );
}

在此示例中，GetuserById方法使用Catherror操作员记录错误并返回错误消息。

就是这样！通过这些步骤，您可以在Angular中实现REST API。

感谢您阅读ð