Un breve análisis del módulo HttpClientModule en aprendizaje angular

Este artículo lo llevará a comprender el módulo HttpClientModule en angular y le presentará el método de solicitud, los parámetros de solicitud, el contenido de la respuesta, los interceptores, Angular Proxy y otros conocimientos relacionados. ¡Espero que le resulte útil!

Este módulo se utiliza para enviar solicitudes Http y los métodos utilizados para enviar solicitudes devuelven objetos Observable . [Tutoriales relacionados recomendados: "tutorial angular"]

1. Inicio rápido

1), presente el módulo HttpClientModule

 // aplicación.module.ts
importar { httpClientModule } desde '@angular/common/http';
importaciones: [
httpMóduloCliente
]

2) Inyecte el objeto de instancia de servicio HttpClient para enviar solicitudes

 // aplicación.component.ts
importar {HttpClient} desde '@angular/common/http';

exportar clase AppComponent {
	constructor (http privado: HttpClient) {}
}

3), enviar solicitud

 importar {HttpClient} desde "@angular/common/http"

la clase de exportación AppComponent implementa OnInit {
constructor (http privado: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
obtenerUsuarios() {
devuelve this.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. Método de solicitud

 this.http.get(url [, opciones]);
this.http.post(url, datos [, opciones]);
this.http.delete(url [, opciones]);
this.http.put(url, datos [, opciones]);

 this.http.get<Publicación[]>('/getAllPosts')
.subscribe(respuesta => console.log(respuesta))

3. Solicitar parámetros

1. clase HttpParams

 exportar declarar clase HttpParams {
constructor(opciones?: HttpParamsOptions);
tiene (parámetro: cadena): booleano;
get(parámetro: cadena): cadena | nulo;
getAll(param: cadena): cadena[] | nulo;
teclas(): cadena[];
append(parámetro: cadena, valor: cadena): HttpParams;
set(param: cadena, valor: cadena): HttpParams;
eliminar (parámetro: cadena, valor?: cadena): HttpParams;
toString(): cadena;
}

2. Interfaz HttpParamsOptions

 declarar interfaz HttpParamsOptions {
fromString?: cadena;
¿deObjeto?: {
[parámetro: cadena]: cadena | ReadonlyArray<cadena>;
};
codificador?: HttpParameterCodec;
}

3. Ejemplos de uso

 importar {HttpParams} desde '@angular/common/http';

let params = new HttpParams({ fromObject: {nombre: "zhangsan", edad: "20"}})
params = params.append("sexo", "masculino")
let params = new HttpParams({ fromString: "nombre=zhangsan&age=20"})

4. Solicitar encabezado

La creación de campos de encabezado de solicitud requiere el uso de la clase HttpHeaders. Existen varios métodos para operar los encabezados de solicitud bajo el objeto de instancia de clase.

 exportar declarar clase HttpHeaders {
constructor(encabezados?: cadena | {
[nombre: cadena]: cadena | cadena [];
});
tiene (nombre: cadena): booleano;
get(nombre: cadena): cadena | nulo;
teclas(): cadena[];
getAll(nombre: cadena): cadena[] | nulo;
append(nombre: cadena, valor: cadena | cadena[]): HttpHeaders;
set(nombre: cadena, valor: cadena | cadena[]): HttpHeaders;
eliminar (nombre: cadena, valor?: cadena | cadena []): HttpHeaders;
}

 let headers = new HttpHeaders({ prueba: "Hola" })

5. Contenido de la respuesta

 declarar tipo HttpObserve = 'cuerpo' | 'respuesta';
// la respuesta lee el cuerpo completo de la respuesta // el cuerpo lee los datos devueltos por el servidor

 esto.http.get(
"https://jsonplaceholder.typicode.com/users",
{ observar: "cuerpo" }
).suscribirse(consola.log)

6. interceptor

Los interceptores son una forma de capturar y modificar globalmente solicitudes y respuestas HTTP en aplicaciones Angular. (Ficha, Error)

El interceptor solo interceptará las solicitudes realizadas mediante el módulo HttpClientModule.

ng g interceptor <name>

6.1 Solicitud de interceptación

 @Inyectable()
clase de exportación AuthInterceptor implementa HttpInterceptor {
constructor() {}
	//Método de interceptación interceptar(
// desconocido especifica el tipo de solicitud cuerpo (cuerpo): HttpRequest<unknown>,
siguiente: HttpHandler
// desconocido especifica el tipo de contenido de la respuesta (cuerpo)): Observable<HttpEvent<unknown>> {
// Clonar y modificar el encabezado de la solicitud const req = request.clone({
establecer encabezados: {
Autorización: "Portador xxxxxxx"
}
})
// Pasa el encabezado de solicitud modificado a la aplicación a través de la función de devolución de llamada return next.handle(req)
}
}

6.2 Intercepción de respuesta

 @Inyectable()
clase de exportación AuthInterceptor implementa HttpInterceptor {
constructor() {}
	//Método de interceptación interceptar(
solicitud: HttpRequest<desconocido>,
siguiente: HttpHandler
): Observable<cualquier> {
devolver siguiente.handle(solicitud).pipe(
reintentar(2),
catchError((error: HttpErrorResponse) => throwError(error))
)
}
}

6.3 Inyección interceptora

 importar {AuthInterceptor} desde "./auth.interceptor"
importar {HTTP_INTERCEPTORS} desde "@angular/common/http"

@NgModule({
proveedores: [
{
proporcionar: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
múltiple: verdadero
}
]
})

7. Proxy angular

1. Cree el archivo proxy.conf.json en el directorio raíz del proyecto y agregue el siguiente código

 {
"/api/*": {
"destino": "http://localhost:3070",
"seguro": falso,
"cambioOrigen": verdadero
}
}

• /api/*: Las solicitudes que comienzan con /api realizadas en la aplicación pasan por este proxy

• destino: URL del lado del servidor

• seguro: si el protocolo de la URL del lado del servidor es https, este elemento debe ser verdadero

• changeOrigin: si el servidor no es localhost, este elemento debe ser verdadero

2. Especifique el archivo de configuración del proxy (método 1)

 "guiones": {
"inicio": "ng servir --proxy-config proxy.conf.json",
}

3. Especifique el archivo de configuración del proxy (método 2)

 "atender": {
"opciones": {
"proxyConfig": "proxy.conf.json"
}, 

Este módulo se utiliza para enviar solicitudes Http y los métodos utilizados para enviar solicitudes devuelven objetos Observable .