Angular 6 - Http服务

Angular 6是一个流行的Web应用程序开发框架。它提供了许多内置的服务和库，用于快速开发现代Web应用程序。其中之一就是Http服务，它为我们提供了发送HTTP请求的功能。在本文中，我们将深入了解Angular 6中的Http服务，并探讨如何使用它发送HTTP请求。

什么是Http服务

Http服务是Angular 6中的一个内置服务，它可用于发送HTTP请求。它是基于RxJS Observable库构建的。Http服务提供了许多方法，以便我们可以发送各种类型的请求，如GET，POST，PUT和DELETE请求。它还具有拦截器的概念，可以拦截请求和响应，以便进行某些操作，例如添加身份验证令牌或设置请求头。

如何使用Http服务

要使用Http服务，我们需要在组件或服务中注入它。以下是如何注入和使用Http服务的示例：

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  private apiUrl = 'http://localhost:3000/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

在上面的代码中，我们首先从@angular/common/http中导入了HttpClient，并将其注入到MyService中。我们还从rxjs导入了Observable，以便我们可以返回可观察对象。在getData()方法中，我们使用this.http.get()方法发送一个GET请求到我们的API端点，并返回一个可观察对象。

发送POST请求

要发送POST请求，我们可以使用this.http.post()方法。以下是具有POST请求的示例：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  private apiUrl = 'http://localhost:3000/data';

  constructor(private http: HttpClient) { }

  postData(data: any): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    return this.http.post<any>(this.apiUrl, data, httpOptions);
  }
}

在上面的代码中，我们定义了一个名为postData()的方法。该方法接受一个数据对象，并将数据作为POST请求发送到我们的API端点。我们还定义了一个httpOptions对象，它指定请求头中的内容类型为JSON。然后，我们使用this.http.post()方法发送POST请求，并返回一个可观察对象。

拦截器

可以通过拦截器来拦截HTTP请求和响应，以便在请求发送到服务器之前或响应返回到应用程序之前添加某些自定义行为。一个常见的例子是添加身份验证令牌或设置请求头。以下是如何使用拦截器的示例：

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

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');
    if (token) {
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
      request = request.clone({ headers });
    }
    return next.handle(request);
  }
}

在上面的代码中，我们首先导入了HttpInterceptor，HttpRequest，HttpHeaders和HttpHandler。我们还导入了Observable可观察对象。然后，我们定义了一个名为MyInterceptor的类，并实现了HttpInterceptor接口。在intercept()方法中，我们首先检查本地存储中是否存在名为token的项。如果存在，则我们设置请求头中的Authorization标头，并将Bearer令牌与token一起发送。最后，我们返回一个可观察对象，用于通知Http服务继续处理请求。

结论

Http服务是Angular 6中的一个内置服务，可用于发送HTTP请求。我们可以使用它发送GET，POST，PUT和DELETE请求，并使用拦截器来拦截请求和响应，以便添加自定义行为。掌握了Http服务，我们就可以更轻松地与API进行通信，并构建出更强大的Web应用程序。