Une brève analyse du module HttpClientModule dans l'apprentissage angulaire-js tutoriel-php.cn

Une brève analyse du module HttpClientModule dans l'apprentissage angulaire

青灯夜游

Libérer： 2022-05-24 12:09:17

avant

1726 Les gens l'ont consulté

Cet article vous fera découvrir le module HttpClientModule dans angular et présentera la méthode de requête, les paramètres de requête, le contenu de la réponse, les intercepteurs, le proxy angulaire et d'autres connaissances connexes. J'espère qu'il sera utile à tout le monde !

Une brève analyse du module HttpClientModule dans l'apprentissage angulaire

Ce module est utilisé pour envoyer des requêtes Http, et les méthodes utilisées pour envoyer des requêtes renvoient toutes des objets Observable. [Recommandations du didacticiel associé : "Http 请求，用于发送请求的方法都返回 Observable 对象。【相关教程推荐：《angular教程》】

1、快速开始

1）、引入 HttpClientModule 模块

// app.module.ts
import { httpClientModule } from &#39;@angular/common/http&#39;;
imports: [
  httpClientModule
]

Copier après la connexion

2）、注入 HttpClient 服务实例对象，用于发送请求

// app.component.ts
import { HttpClient } from &#39;@angular/common/http&#39;;

export class AppComponent {
	constructor(private http: HttpClient) {}
}

Copier après la connexion

3）、发送请求

import { HttpClient } from "@angular/common/http"

export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}
  ngOnInit() {
    this.getUsers().subscribe(console.log)
  }
  getUsers() {
    return this.http.get("https://jsonplaceholder.typicode.com/users")
  }
}

Copier après la connexion

2、请求方法

this.http.get(url [, options]);
this.http.post(url, data [, options]);
this.http.delete(url [, options]);
this.http.put(url, data [, options]);

Copier après la connexion

this.http.get<Post[]>(&#39;/getAllPosts&#39;)
  .subscribe(response => console.log(response))

Copier après la connexion

3、请求参数

1、HttpParams 类

export declare class HttpParams {
    constructor(options?: HttpParamsOptions);
    has(param: string): boolean;
    get(param: string): string | null;
    getAll(param: string): string[] | null;
    keys(): string[];
    append(param: string, value: string): HttpParams;
    set(param: string, value: string): HttpParams;
    delete(param: string, value?: string): HttpParams;
    toString(): string;
}

Copier après la connexion

2、HttpParamsOptions 接口

declare interface HttpParamsOptions {
    fromString?: string;
    fromObject?: {
        [param: string]: string | ReadonlyArray<string>;
    };
    encoder?: HttpParameterCodec;
}

Copier après la connexion

3、使用示例

import { HttpParams } from &#39;@angular/common/http&#39;;

let params = new HttpParams({ fromObject: {name: "zhangsan", age: "20"}})
params = params.append("sex", "male")
let params = new HttpParams({ fromString: "name=zhangsan&age=20"})

Copier après la connexion

4、请求头

请求头字段的创建需要使用 HttpHeaders 类，在类实例对象下面有各种操作请求头的方法。

export declare class HttpHeaders {
    constructor(headers?: string | {
        [name: string]: string | string[];
    });
    has(name: string): boolean;
    get(name: string): string | null;
    keys(): string[];
    getAll(name: string): string[] | null;
    append(name: string, value: string | string[]): HttpHeaders;
    set(name: string, value: string | string[]): HttpHeaders;
    delete(name: string, value?: string | string[]): HttpHeaders;
}

Copier après la connexion

let headers = new HttpHeaders({ test: "Hello" })

Copier après la connexion

5、响应内容

declare type HttpObserve = &#39;body&#39; | &#39;response&#39;;
// response 读取完整响应体
// body 读取服务器端返回的数据

Copier après la connexion

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

Copier après la connexion

6、拦截器

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

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

ng g interceptor <name>

Une brève analyse du module HttpClientModule dans lapprentissage angulaire

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)
  }
}

Copier après la connexion

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))
    )
  }
}

Copier après la connexion

6.3 拦截器注入

import { AuthInterceptor } from "./auth.interceptor"
import { HTTP_INTERCEPTORS } from "@angular/common/http"

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})

Copier après la connexion

7、Angular Proxy

1、在项目的根目录下创建 proxy.conf.json 文件并加入如下代码

{
 	"/api/*": {
    "target": "http://localhost:3070",
    "secure": false,
    "changeOrigin": true
  }
}

Copier après la connexion

/api/*：在应用中发出的以 /api 开头的请求走此代理
target：服务器端 URL
secure：如果服务器端 URL 的协议是 https，此项需要为 true
changeOrigin：如果服务器端不是 localhost，此项需要为 true

2、指定 proxy 配置文件 (方式一)

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",
}

Copier après la connexion

3、指定 proxy 配置文件 (方式二)

"serve": {
  "options": {
    "proxyConfig": "proxy.conf.json"
  },

Copier après la connexion

该模块用于发送 Http 请求，用于发送请求的方法都返回 ObservableTutoriel angulaire

1. Démarrage rapide

1), introduisez le module HttpClientModulerrreee2), injectez l'instance de service HttpClient objet, utilisé pour envoyer des requêtes🎜rrreee🎜3), envoyer des requêtes🎜rrreee

2, méthode de requête

rrreeerrreee

3, paramètres de requête🎜1. Classe HttpParams🎜rrreee🎜2. Interface HttpParamsOptions🎜rrreee🎜3. Exemples d'utilisation🎜rrreee

4. Lors de l'utilisation de la classe HttpHeaders, il existe différentes méthodes pour exploiter les en-têtes de requête sous l'objet instance de classe. 🎜rrreeerrreee
5. Contenu de la réponse
rrreeerrreee
6 Intercepteur
🎜L'intercepteur est la capture et la modification globales dans les applications angulaires HTTP. méthodes de requête et de réponse. (Jeton, Erreur) 🎜🎜L'intercepteur n'interceptera que les requêtes effectuées à l'aide du module HttpClientModule. 🎜🎜`ng g interceptor <name>`🎜🎜
🎜🎜6.1 Demande d'interception🎜rrreee🎜6.2 Interception de réponse🎜rrreee🎜6.3 Injection d'intercepteur🎜rrreee
7. Angular Proxy

🎜1. Créez le fichier proxy.conf.json dans le répertoire racine du projet et ajoutez le code suivant🎜rrreee

🎜/api/* : Les requêtes commençant par /api émises dans l'application passent par ce proxy🎜
🎜cible : URL côté serveur🎜
🎜secure : si le protocole de l'URL côté serveur est https, cet élément doit être vrai🎜
🎜changeOrigin : si le serveur n'est pas localhost, cet élément doit être vrai🎜

🎜2. Spécifiez le fichier de configuration du proxy (Méthode 1)🎜rrreee🎜3. Spécifiez le fichier de configuration du proxy (Méthode 2)🎜rrreee 🎜Ce module est utilisé pour envoyer des requêtes Http, les méthodes utilisées pour envoyer des requêtes renvoient toutes des objets Observable. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!