Angular 如何处理 http 请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，http 请求是十分常见的操作，例如获取数据、修改数据、上传文件等。在 Angular 中，通过 HttpClient 模块的支持，我们可以很方便地进行 http 请求处理。本文将介绍如何在 Angular 中使用 HttpClient 模块进行 http 请求的各种操作。

安装与导入

在开始使用 Angular 的 HttpClient 模块前，需要先安装 @angular/common/http 包，并在需要使用的模块中导入该模块。例如，在 app.module.ts 文件中导入该模块：

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

基础用法

在 Angular 中，使用 HttpClient 进行 http 请求最基础的操作无非就是发起 GET、POST、PUT、DELETE 等请求。下面是示例代码：

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

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

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.apiUrl);
  }

  createPost(post: Post): Observable<Post> {
    return this.http.post<Post>(this.apiUrl, post);
  }

  updatePost(post: Post): Observable<Post> {
    const url = `${this.apiUrl}/${post.id}`;
    return this.http.put<Post>(url, post);
  }

  deletePost(id: number): Observable<void> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete<void>(url);
  }
}

在上面的代码中，我们定义了一个 DataService，其中包含四个方法，分别用来获取、创建、更新和删除数据。这些方法都返回一个 Observable 对象，通过订阅该对象来获取异步请求的数据。

处理响应

在真实的场景中，请求的响应可能不仅仅是一个简单的数据结构，而可能还包含一些错误信息、状态码等。我们可以通过 HttpResponse 类来处理响应。

例如，下面的代码演示了如何处理错误响应：

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';

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

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.apiUrl)
      .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(`Backend returned code ${error.status}, body was: ${error.error}`);
    }
    return throwError('Something bad happened; please try again later.');
  }
}

在上面的代码中，我们通过 catchError 操作符捕获了错误请求，并在 handleError 中处理错误。对于客户端错误，我们打印错误信息，对于服务器端错误，我们打印状态码和错误响应体。

请求拦截器

虽然我们可以在每个方法中进行错误处理，但这样显然很繁琐，而且容易遗漏。因此，我们可以使用 Angular 的请求拦截器来统一处理错误和请求头等操作。

例如，下面的代码演示了如何使用请求拦截器在请求头中添加 token：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpInterceptor } from '@angular/common/http';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  private token = 'your-auth-token';

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.token}`
      }
    });
    return next.handle(request);
  }

}

在上面的代码中，我们定义了一个 TokenInterceptor 类，实现了 HttpInterceptor 接口。在 intercept 方法中，我们对请求头进行了修改，添加了一个名为 Authorization 的头部信息。

要想应用该请求拦截器，我们需要在 app.module.ts 中进行如下修改：

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './token.interceptor';

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

在上面的代码中，我们在 providers 数组中加入了 TokenInterceptor 类，并且把 multi 设为了 true，表示允许同时存在多个拦截器。

总结

通过本文的介绍，我们了解了如何在 Angular 中使用 HttpClient 进行 http 请求，包括基础用法、响应处理以及请求拦截器等技术。这些知识对于前端开发人员而言都是不可或缺的，将在实际应用中起到重要的指导作用。

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

Angular 如何处理 http 请求

安装与导入

基础用法

处理响应

请求拦截器

总结

纠错反馈