HttpClientModule模块如何应用于Angular中实现长尾词查询？

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

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

该模块用于发送Http请求，包括GET、POST、PUT、DELETE等。下面是一些关键点：

1. 请求方法：HttpClient提供了多种请求方法，如get()、post()、put()、delete()等。

2.请求参数：可以通过传递参数对象来设置请求的查询参数或请求体。

3.响应内容：HttpClient返回的响应对象包含了响应头、状态码、响应体等信息。

4.拦截器：拦截器可以在请求发送前、请求发送后、响应返回后进行拦截和处理。

5.Angular+Proxy：使用Angular开发时，可以通过设置代理来绕过跨域限制。

希望以上内容对大家有所帮助！

本篇文章带大家了解一下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模块的详细内容，更多请关注自由互联其它相关文章！