Uma breve análise do módulo HttpClientModule em aprendizado angular

Este artigo irá levá-lo a entender o módulo HttpClientModule em angular e apresentar o método de solicitação, parâmetros de solicitação, conteúdo de resposta, interceptores, Angular Proxy e outros conhecimentos relacionados. Espero que seja útil para você!

Este módulo é usado para enviar solicitações Http , e os métodos usados ​​para enviar solicitações retornam objetos Observable . [Tutoriais relacionados recomendados: "tutorial angular"]

1. Início rápido

1), apresente o módulo HttpClientModule

 //app.module.ts
importar {httpClientModule} de '@angular/common/http';
importações: [
httpClientModule
]

2) Injetar o objeto de instância de serviço HttpClient para enviar solicitações

 //app.component.ts
importar { HttpClient } de '@angular/common/http';

classe de exportação AppComponent {
	construtor (http privado: HttpClient) {}
}

3), enviar solicitação

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

classe de exportação AppComponent implementa OnInit {
construtor (http privado: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
getUsuários() {
retorne isto.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. Método de solicitação

 this.http.get(url [, opções]);
this.http.post(url, dados [, opções]);
this.http.delete(url [, opções]);
this.http.put(url, dados [, opções]);

 this.http.get<Post[]>('/getAllPosts')
.subscribe(resposta => console.log(resposta))

3. Parâmetros de solicitação

1. Classe HttpParams

 exportar declarar classe HttpParams {
construtor(opções?: HttpParamsOptions);
tem(parâmetro: string): booleano;
get (parâmetro: string): string nulo;
getAll(parâmetro: string): string[] |
chaves(): string[];
anexar (parâmetro: string, valor: string): HttpParams;
set(parâmetro: string, valor: string): HttpParams;
delete(parâmetro: string, valor?: string): HttpParams;
toString(): string;
}

2. Interface HttpParamsOptions

 declarar interface HttpParamsOptions {
fromString?: string;
doObjeto?: {
[parâmetro: string]: string | ReadonlyArray<string>;
};
codificador?: HttpParameterCodec;
}

3. Exemplos de uso

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

deixe params = new HttpParams({fromObject: {nome: "zhangsan", idade: "20"}})
params = params.append("sexo", "masculino")
deixe params = new HttpParams({ fromString: "name=zhangsan&age=20"})

4. Cabeçalho da solicitação

A criação de campos de cabeçalho de solicitação requer o uso da classe HttpHeaders. Existem vários métodos para operar cabeçalhos de solicitação no objeto de instância de classe.

 exportar declarar classe HttpHeaders {
construtor(cabeçalhos?: string | {
[nome: string]: string | string[];
});
tem(nome: string): boolean;
get(nome: string): string | nulo;
chaves(): string[];
getAll(nome: string): string[] |
acrescentar(nome: string, valor: string | string[]): HttpHeaders;
set(nome: string, valor: string | string[]): HttpHeaders;
delete(nome: string, valor?: string | string[]): HttpHeaders;
}

 deixe cabeçalhos = new HttpHeaders({ teste: "Olá" })

5. Conteúdo da resposta

 declare o tipo HttpObserve = 'corpo' |
//a resposta lê o corpo completo da resposta //o ​​corpo lê os dados retornados pelo servidor

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

6. Interceptador

Os interceptadores são uma forma de capturar e modificar globalmente solicitações e respostas HTTP em aplicativos Angular. (Token, Erro)

O interceptador interceptará apenas solicitações feitas usando o módulo HttpClientModule.

ng g interceptor <name>

6.1 Solicitar interceptação

 @Injetável()
classe de exportação AuthInterceptor implementa HttpInterceptor {
construtor() {}
	//Método de interceptação intercept(
// desconhecido especifica o tipo de corpo da solicitação (corpo): HttpRequest<unknown>,
próximo: HttpHandler
// desconhecido especifica o tipo de conteúdo da resposta (corpo)): Observable<HttpEvent<unknown>> {
// Clone e modifique o cabeçalho da solicitação const req = request.clone({
setHeaders: {
Autorização: "Portador xxxxxxx"
}
})
// Passa o cabeçalho da solicitação modificado de volta para o aplicativo por meio da função de retorno de chamada return next.handle(req)
}
}

6.2 Interceptação de resposta

 @Injetável()
classe de exportação AuthInterceptor implementa HttpInterceptor {
construtor() {}
	//Método de interceptação intercept(
solicitação: HttpRequest<desconhecido>,
próximo: HttpHandler
): Observável<qualquer> {
retorne next.handle(solicitação).pipe(
tente novamente (2),
catchError((erro: HttpErrorResponse) => throwError(erro))
)
}
}

6.3 Injeção do interceptor

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

@NgModule({
provedores: [
{
fornecer: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: verdadeiro
}
]
})

7. Proxy Angular

1. Crie o arquivo proxy.conf.json no diretório raiz do projeto e adicione o seguinte código

 {
"/api/*": {
"destino": "http://localhost:3070",
"seguro": falso,
"changeOrigin": verdadeiro
}
}

• /api/*: Solicitações começando com /api feitas na aplicação passam por este proxy

• alvo: URL do lado do servidor

• seguro: se o protocolo da URL do servidor for https, este item precisa ser verdadeiro

• changeOrigin: Se o servidor não for localhost, este item precisa ser verdadeiro

2. Especifique o arquivo de configuração do proxy (método 1)

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

3. Especifique o arquivo de configuração do proxy (método 2)

 "servir": {
"opções": {
"proxyConfig": "proxy.conf.json"
}, 

Este módulo é usado para enviar solicitações Http , e os métodos usados ​​para enviar solicitações retornam objetos Observable .