Angular 中调用 API 的方法-JavaScript中文网-JavaScript教程资源分享门户

Angular 是一个流行的前端框架，它提供了丰富的功能和工具来开发现代化的 Web 应用程序。其中一个重要的功能是调用 API，以便从服务器获取数据或与后端进行交互。在本文中，我们将探讨 Angular 中调用 API 的方法，并提供详细的指导和示例代码。

使用 HttpClient

Angular 提供了一个名为 HttpClient 的模块，它是一个 HTTP 客户端库，用于与服务器进行通信。它支持各种 HTTP 请求方法，如 GET、POST、PUT、DELETE 等，并提供了丰富的配置选项和拦截器功能。

要使用 HttpClient，我们需要先在应用程序中导入它：

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

然后，我们可以在组件或服务中注入 HttpClient，并使用它来发出 HTTP 请求。例如，以下代码演示了如何使用 HttpClient 发出一个 GET 请求：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('/api/data').subscribe(data => {
      console.log(data);
    });
  }

}

在上面的代码中，我们注入了 HttpClient，并在 ngOnInit 方法中使用它来发出一个 GET 请求，该请求将请求 URL 设置为 /api/data。我们还订阅了请求的结果，以便在响应到达时处理数据。

处理响应

当我们调用 HttpClient 发出请求时，它会返回一个 Observable 对象，该对象可以订阅以获取响应。响应对象包含一个 status 属性，表示响应的状态码，以及一个 body 属性，表示响应体的内容。

通常情况下，我们需要将响应体转换为我们可以使用的格式，例如 JSON 对象。为此，我们可以使用 HttpClient 的 get 方法的第二个参数，该参数是一个配置对象，用于指定响应的类型。例如，以下代码演示了如何将响应体转换为 JSON 对象：

this.http.get('/api/data', { responseType: 'json' }).subscribe(data => {
  console.log(data);
});

在上面的代码中，我们将 responseType 设置为 'json'，以便将响应体解析为 JSON 对象。我们还可以将其设置为 'text'、'blob' 或 'arraybuffer'，以便解析不同类型的响应体。

处理错误

当调用 API 发生错误时，我们需要能够捕获并处理它们。为此，我们可以使用 HttpClient 的 catchError 操作符，它允许我们捕获错误并返回一个新的 Observable 对象。

例如，以下代码演示了如何处理一个 GET 请求的错误：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('/api/data').pipe(
      catchError((error: HttpErrorResponse) => {
        console.log(error);
        return throwError('Something went wrong');
      })
    ).subscribe(data => {
      console.log(data);
    });
  }

}

在上面的代码中，我们使用 catchError 操作符捕获了错误，并返回一个新的 Observable 对象，该对象发出一个错误消息。我们还将错误记录到控制台中，以便进行调试和故障排除。

使用拦截器

拦截器是 HttpClient 提供的强大功能之一，它允许我们拦截和修改 HTTP 请求和响应。拦截器可以用于添加身份验证令牌、修改请求头、缓存响应等。

要使用拦截器，我们需要创建一个实现 HttpInterceptor 接口的类，并在应用程序中提供它。例如，以下代码演示了如何创建一个拦截器，该拦截器向请求头中添加一个身份验证令牌：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    const token = localStorage.getItem('auth_token');
    if (token) {
      const authRequest = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(authRequest);
    } else {
      return next.handle(request);
    }
  }

}

在上面的代码中，我们创建了一个名为 AuthInterceptor 的拦截器，它会检查本地存储中是否存在名为 auth_token 的令牌。如果存在，它将复制请求并向请求头中添加一个身份验证令牌。否则，它将直接传递原始请求。

要在应用程序中使用拦截器，我们需要在 AppModule 中提供它。例如，以下代码演示了如何提供 AuthInterceptor：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的代码中，我们使用 HTTP_INTERCEPTORS 令牌提供了 AuthInterceptor，以便它可以被 HttpClient 使用。我们还使用 multi: true 选项，以便我们可以提供多个拦截器。

总结

在本文中，我们探讨了 Angular 中调用 API 的方法，并提供了详细的指导和示例代码。我们介绍了如何使用 HttpClient 发出 HTTP 请求、如何处理响应和错误、以及如何使用拦截器。这些技术对于开发现代化的 Web 应用程序非常重要，希望本文能够帮助读者更好地理解和应用它们。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657ecd47d2f5e1655d9ac00f