Angular HttpClientModule模块学习要点有哪些？

本文共计967个文字，预计阅读时间需要4分钟。

本章节为家人解读Angular中的HttpClientModule模块，介绍请求方法、请求参数、响应内容、拦截器、Angular+Proxy等相关知识，希望对大家有所帮助！

该模块用于发送Http请求，以下是该模块的基本用法：

1. 引入模块typescriptimport { HttpClientModule } from '@angular/common/http';

2. 在模块中声明typescript@NgModule({ imports: [ HttpClientModule ]})export class AppModule { }

3. 使用模块发送请求typescriptimport { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';

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

constructor(private http: HttpClient) {}

get(url: string) { return this.http.get(url); }

post(url: string, data: any) { return this.http.post(url, data); }

// 其他请求方法...}

4. 请求参数- GET请求：请求参数通常以查询字符串的形式附加到URL上。- POST请求：请求参数作为请求体发送。

5. 响应内容- HttpClient默认返回Observable对象，可以使用订阅来获取响应内容。- 示例：typescriptapiService.get('http://example.com/data').subscribe(data=> { console.log(data);});

6. 拦截器- 使用HttpInterceptor可以对请求和响应进行拦截和处理。- 示例：typescriptimport { Injectable } from '@angular/core';import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';import { Observable } from 'rxjs';

@Injectable()export class AuthInterceptor implements HttpInterceptor {

intercept(req: HttpRequest, next: HttpHandler): Observable { const authReq=req.clone({ setHeaders: { Authorization: 'Bearer ' + localStorage.getItem('token') } }); return next.handle(authReq); }}

7. Angular+Proxy- 在开发过程中，可以使用Angular+Proxy来模拟后端服务，方便调试和测试。- 安装代理工具：bashnpm install --save-dev nghttp2- 配置代理：typescriptimport { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';import { AuthInterceptor } from './auth.interceptor';

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

以上就是HttpClientModule模块的基本用法和相关知识，希望对大家有所帮助！

本篇文章带大家了解一下angular中的HttpClientModule模块，介绍一下请求方法、请求参数、响应内容、拦截器、Angular Proxy等相关知识，希望对大家有所帮助！

该模块用于发送 Http 请求，用于发送请求的方法都返回 Observable 对象。

1、快速开始

1）、引入 HttpClientModule 模块

// app.module.ts import { jsonplaceholder.typicode.com/users") } }

2、请求方法

this.jsonplaceholder.typicode.com/users", { observe: "body" } ).subscribe(console.log)

6、拦截器

拦截器是 Angular 应用中全局捕获和修改 HTTP 请求和响应的方式。（Token、Error）

拦截器将只拦截使用 HttpClientModule 模块发出的请求。

ng g interceptor <name>

6.1 请求拦截

@Injectable() export class AuthInterceptor implements HttpInterceptor { constructor() {} // 拦截方法 intercept( // unknown 指定请求体 (body) 的类型 request: HttpRequest<unknown>, next: HttpHandler // unknown 指定响应内容 (body) 的类型 ): Observable<HttpEvent<unknown>> { // 克隆并修改请求头 const req = request.clone({ setHeaders: { Authorization: "Bearer xxxxxxx" } }) // 通过回调函数将修改后的请求头回传给应用 return next.handle(req) } }

6.2 响应拦截

@Injectable() export class AuthInterceptor implements HttpInterceptor { constructor() {} // 拦截方法 intercept( request: HttpRequest<unknown>, next: HttpHandler ): Observable<any> { return next.handle(request).pipe( retry(2), catchError((error: HttpErrorResponse) => throwError(error)) ) } }

6.3 拦截器注入

import { AuthInterceptor } from "./auth.interceptor" import { HTTP_INTERCEPTORS } from "@angular/common/localhost:3070", "secure": false, "changeOrigin": true } }

• /api/*：在应用中发出的以 /api 开头的请求走此代理

  

• target：服务器端 URL

• secure：如果服务器端 URL 的协议是 csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-3fd7f7a902.css" rel="stylesheet"/>

  该模块用于发送 Http 请求，用于发送请求的方法都返回 Observable 对象。

  更多编程相关知识，请访问：编程视频！！

  以上就是angular学习之浅析HttpClientModule模块的详细内容，更多请关注自由互联其它相关文章！