Angular7-Http客户端

Angular7-Http客户端是Angular7中的一个模块，用于在应用程序中使用HTTP服务进行API交互。它提供了从应用程序中向服务器发送HTTP请求的方法，并获取响应数据。

为什么要使用Http客户端

应用程序中的数据通常需要从服务器端获取，通常需要使用HTTP服务与服务器通信。Angular7提供了一个强大且易于使用的HTTP客户端模块，用于通过HTTP协议从服务器获取数据。它提供了许多功能，如HTTP请求构建器，HTTP拦截器等。

Http客户端的使用方法

为了使用HTTP服务，我们需要在Angular应用程序中导入HttpClientModule。在app.module.ts文件中添加以下代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Adding HttpClientModule into imports array
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

作为一个示例，我们使用HttpClient从API中获取数据。创建一个名为data.service.ts的新的Angular服务，并添加以下代码：

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

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

  constructor(private http: HttpClient) { }

  getData() {
    // Return the HTTP Request to the API
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

现在，在要使用数据的组件中，我们导入DataService，并使用它来获取获取数据。例如，下面是app.component.ts文件中的一些示例代码：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Data from API</h1>
    <ul>
      <li *ngFor="let post of posts">
        {{ post.title }}
      </li>
    </ul>
  `
})
export class AppComponent {
  posts: any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    // Call the HTTP Request
    this.dataService.getData().subscribe(data => {
      this.posts = data;
    });
  }
}

在上面的代码中，我们使用AppComponent组件内的ngOnInit钩子函数来调用DataService来获取数据。我们使用Angular的订阅机制来从服务中获取数据。

Http拦截器的使用方法

HTTP拦截器是Angular7 Http客户端中的一个强大功能，它可以用于更改HTTP请求或响应。我们可以使用拦截器来添加请求头、添加身份验证令牌或修改请求或响应。下面是一个简单的示例，用于向请求中添加身份验证令牌。

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = 'my-auth-token';
    // Clone the existing request and add the Authorization header
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${authToken}`)
    });
    // Pass the new Authorization header request to the next handler
    return next.handle(authReq);
  }
}

在上面的代码中，我们使用Angular7提供的HttpInterceptor接口来创建AuthInterceptor类。然后，我们使用实现接口的intercept方法附加Authorization标头。

要使用此拦截器，请将其添加到providers数组中，如下所示：

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: [
    // Add AuthInterceptor to the providers array
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

在上面的代码中，我们将我们的auth拦截器添加到应用程序中。