Angular 学习笔记 (九） - HTTP Client

大多数前端应用都要通过 HTTP 协议与服务器通讯，才能下载或上传数据并访问其它后端服务。Angular 给应用提供了一个简化的 HTTP 客户端 API，也就是 @angular/common/http 中的 HttpClient 服务类。

 https://angular.cn/guide/http

 

一. 准备工作

1.1 项目中导入Http

app.module.ts

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

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

 HttpClient 服务为所有工作都使用了Observable。你必须导入范例代码片段中出现的 RxJS 可观察对象和操作符。比如 ConfigService 中的这些导入就很典型。

1.2 模拟后端

模拟后端有多种方式，这里介绍一种

谷歌的Firebase

谷歌搜索　　Firebase -> 新建一个项目 -> 选择新建一个Realtime Database。

 

 之后就可以模拟向该Server发送Http数据.

 

二. 发送和接收数据

本例中的数据结构：

export class Post{
    title:'',
    content:''
}

Post:

createAndStorePost(title: string, content: string) {
    const postData: Post = { title: title, content: content };
    this.http
      .post<{ name: string }>(
        "https://project.firebaseio.com/posts.json",
        postData,
        {
          observe: "response",
        }
      )
      .subscribe(
        (responseData) => {
          console.log(responseData);
        },
        (error) => {
          this.error.next(error.message);
        }
      );
  }

Fetch:

fetchPosts() {
    return this.http
      .get<{ [key: string]: Post }>(
        "https://project.firebaseio.com/posts.json",
        {
          headers: new HttpHeaders({ "Custom-Header": "hello" }),
          params: new HttpParams().set("print", "pretty"),
          responseType: 'json'
        }
      )
      .pipe(
        map((responseData) => {
          const postsArray: Post[] = [];
          for (const key in responseData) {
            if (responseData.hasOwnProperty(key)) {
              postsArray.push({ ...responseData[key], id: key });
            }
          }
          return postsArray;
        }),
        catchError((errorRes) => {
          // Send to analytics server
          return throwError(errorRes);
        })
      );
  }

 

三. 拦截器Interceptor

借助拦截机制，你可以声明一些拦截器，它们可以检查并转换从应用中发给服务器的 HTTP 请求。这些拦截器还可以在返回应用的途中检查和转换来自服务器的响应。多个拦截器构成了请求/响应处理器的双向链表。

拦截器可以用一种常规的、标准的方式对每一次 HTTP 的请求/响应任务执行从认证到记日志等很多种隐式任务。

如果没有拦截机制，那么开发人员将不得不对每次 HttpClient 调用显式实现这些任务。

实现一个拦截器：

import { HttpEventType, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { map, tap } from "rxjs/operators";

export class AuthInterceptorService implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        console.log('Request is on its way');
        console.log(req.url);
        const modifiedRequest = req.clone({
            headers: req.headers.append('Auth', 'xyz')
        });
        return next.handle(modifiedRequest).pipe(tap(event => {
            console.log(event);
            if (event.type === HttpEventType.Response) {
                console.log('Response arrived, body data: ');
                console.log(event.body);
            }
        }));
    }
}

在app.module.ts:

providers: [{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi:true}],