Angular 的HttpClient的理解

时间：2021年4月29日13:28:07

当前我对Angular 的 Httpclient使用的理解

实现新建一个HttpService

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { RetResult } from 'src/bean/core/RetResult';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

    // get请求
  getData(url: any, params: any): Observable<RetResult> {
    return this.http.get<RetResult>(url, {
      params: params
    });
  }

// post请求
  postJsonData(url: any, body: any, params: any): Observable<RetResult> {
    const headers = new HttpHeaders({
      "Content-Type": "application/json"
    });
    return this.http.post<RetResult>(url, body, {
      headers: headers,
      params: params
    });
  }
}

有几个注意的点：

0. http请求的默认格式是json，其他的格式的需要是在head中自己手动填写，所以其实post请求中的head也不需要

1. 请求数据的话，get请求问题不大

2. post请求中，body参数中的数据，是键值对类型，会放在请求的body中，后端（springboot）需要是@RequestBody来接收，使用于提交表单，比如添加一条记录这种。

3. post请求的params参数是放在head中的，结果就是和get请求一样，参数最终在url上可以看到，选填。

然后，请求返回处理，就是Observable那一套，也不是很懂，先这么写着，其中，httpService就是上面的那个service，然后在constructor（）方法中声明了，问题不大

  getSettingData(): void {
    const url = 'api/invoice/getInvoiceByPages';
    const data = {
      pageIndex: 0,
      pageSize: 10
    };
    // 调用hhtp服务请求数据，主要是为了将请求的一些公关内容提取为一个服务
    this.httpService.getData(url, data)
      .subscribe({
        next: (result) => {
          console.log(result);
          console.log(result.data.content);
          this.invoiceList = result.data.content;
          this.invoiceDataSource.data = result.data.content;
          this.invoiceDataSource.paginator = this.paginator;
        },
        error: (err) => (console.log(err)),
      });
  }