angular HttpClientModule

李卓书

已于 2022-06-02 11:04:42 修改

阅读量442

点赞数 1

分类专栏： angular 文章标签： angular.js javascript 前端

于 2022-05-15 15:04:03 首次发布

本文链接：https://blog.youkuaiyun.com/wangbiao9292/article/details/124780760

版权

angular 专栏收录该内容

24 篇文章

订阅专栏

本文档详细介绍了Angular的HttpClient模块的使用，包括GET、POST、DELETE、PUT等常用方法，以及如何设置请求头、响应体和使用拦截器进行全局请求处理。示例展示了参数传递、HttpParams的使用，以及如何在拦截器中处理token。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

说明

就是对ajax的类似封装

常用方法

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

传参

通过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):HttpParam;
  set(param:string,value:string):HttpParam;
  delete(param:string,value:string):HttpParam;
  toString():string;
}

HttpParamsOptions

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

示例

    var url1 = "https://api.seniverse.com/v3/weather/daily.json?key=SCYrvkytJze9qyzOh1&location=beijing&language=zh-Hans&unit=c"
    var url2 = "https://api.seniverse.com/v3/weather/daily.json"
    var obj = {
      key: "SCYrvkytJze9qyzOh1",
      location: 'beijing',
      language: 'zh-Hans',
      unit:'c'
    }
    this.http.post(url2, {
      params: obj
    }).subscribe(data => {
      debugger
      console.log(data)
    })

上面的是简写，也可以用HttpParams

设置请求头

let headers = new HttpHeaders({
	test:"hello world"
});
this.http.get(url,{headers}).subscribe()

设置响应体

this.http.get(url,{observe:'body'|'response'})

拦截器

全局捕获请求和响应，只能捕捉httpClientModule，用AJAX就捕捉不到

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { catchError, Observable, retry, throwError } from 'rxjs';

@Injectable()
export class CommonAjaxInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    debugger;
    //写一些业务逻辑，包括token的处理啊什么的
    let req = request.clone({
      setHeaders: {
        token:"token"
      }
    })

    return next.handle(req).pipe(retry(3),catchError(err=>throwError(err))) 
  }
}

在appModule中需要注入

  providers: [TestService, {
    provide: HTTP_INTERCEPTORS,
    useClass: CommonAjaxInterceptor,
    multi:true
  }],