Angular Http

Http服务

HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制。

---

启用Http服务的准备工作

要让 HttpClient 在应用中随处可用，需要在根模块的@NgModule.imports 数组中加入 HttpClientModule。

---

Http方法返回单个值

HTTP 是一个请求/响应式协议。你发起请求，它返回单个的响应。
所有的 HttpClient 方法都会返回某个值的 RxJS Observable。
通常，Observable 可以在一段时间内返回多个值。但来自 HttpClient 的 Observable 总是发出一个值，然后结束，再也不会发出其它值。

注： 可观察对象(Observable) 是声明式的，即定义的用于发布值的函数，必须由消费者订阅后，该函数才会实际执行。

使用RxJS 的 of() 函数来模拟Observable：

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

---

HttpClient.get()方法

方法参数：

• URL地址
• options参数(可选)

get()方法有如下特点：

• 构造一个GET请求，将主体解释为JSON并返回。
• 请求参数和对应的值附加在URL后面，利用 ? 号代表URL的结尾和请求参数的开始(GET请求特点)。
• 默认情况下把响应体当做无类型的 JSON 对象进行返回。如果指定了可选的模板类型 <Hero[]>，就会给返回你一个类型化的对象。其中，JSON 数据的具体形态是由服务器的数据 API 决定的。

  /**
   * Constructs a `GET` request that interprets the body as a JSON object and
   * returns the response body as a JSON object.
   *
   * @param url     The endpoint URL.
   * @param options The HTTP options to send with the request.
   *
   *
   * @return An `Observable` of the response body as a JSON object.
   */
  get(url: string, options?: {
      headers?: HttpHeaders | {
          [header: string]: string | string[];
      };
      observe?: 'body';
      params?: HttpParams | {
          [param: string]: string | string[];
      };
      reportProgress?: boolean;
      responseType?: 'json';
      withCredentials?: boolean;
  }): Observable<Object>;

/* 查询操作 */
get(params): Observable<any> {
   return this.http.get(URL, {params:params}); // 这里的http为HttpClient实例
}

---

HttpClient.put()方法

方法参数：

• URL 地址
• body部分参数
• options参数(可选)

  /**
   * Constructs a `PUT` request that interprets the body as a JSON object and returns the response
   * body as a JSON object.
   *
   * @param url The endpoint URL.
   * @param body The resources to add/update.
   * @param options HTTP options
   *
   * @return An `Observable` of the response, with the response body as a JSON object.
   */
  put(url: string, body: any | null, options?: {
      headers?: HttpHeaders | {
          [header: string]: string | string[];
      };
      observe?: 'body';
      params?: HttpParams | {
          [param: string]: string | string[];
      };
      reportProgress?: boolean;
      responseType?: 'json';
      withCredentials?: boolean;
  }): Observable<Object>;

/* 修改操作 */
mod(params):Observable<any>{
  return this.http.put(URL, params);  // 这里的http为HttpClient实例
}

---

HttpClient.post()方法

方法参数：

• URL地址
• body部分参数
• options参数(可选)

  /**
   * Constructs a `POST` request that interprets the body as a
   * JSON object and returns the response body as a JSON object.
   *
   * @param url The endpoint URL.
   * @param body The content to replace with.
   * @param options HTTP options
   *
   * @return An `Observable` of the response, with the response body as a JSON object.
   */
  post(url: string, body: any | null, options?: {
      headers?: HttpHeaders | {
          [header: string]: string | string[];
      };
      observe?: 'body';
      params?: HttpParams | {
          [param: string]: string | string[];
      };
      reportProgress?: boolean;
      responseType?: 'json';
      withCredentials?: boolean;
  }): Observable<Object>;

/* 添加方法 */
add(params): Observable<any> {
  return this.http.post(URL, params); // 这里的http为HttpClient实例
}

---

HttpClient.delete()方法

• URL地址
• options参数(可选)

  /**
   * Constructs a `DELETE` request that interprets the body as a JSON object and
   * returns the response body as a JSON object.
   *
   * @param url     The endpoint URL.
   * @param options The HTTP options to send with the request.
   *
   * @return An `Observable` of the response, with the response body of type `Object`.
   */
  delete(url: string, options?: {
      headers?: HttpHeaders | {
          [header: string]: string | string[];
      };
      observe?: 'body';
      params?: HttpParams | {
          [param: string]: string | string[];
      };
      reportProgress?: boolean;
      responseType?: 'json';
      withCredentials?: boolean;
  }): Observable<Object>;

/* 删除操作 */
del(no): Observable<any>  {
  return this.http.delete(URL + `/${no}`);  // 这里的http为HttpClient实例
}

添加和更新请求头

很多服务器都需要额外的头来执行保存操作。 例如，服务器可能需要一个授权令牌，或者需要 Content-Type 头来显式声明请求体的 MIME 类型。

添加请求头

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    Authorization: 'my-auth-token'
  })
};

更新请求头

你不能直接修改前面的选项对象中的 HttpHeaders 请求头，因为 HttpHeaders 类的实例是不可变对象。请改用 set() 方法，以返回当前实例应用了新更改之后的副本。

下面的例子演示了当旧令牌过期时，可以在发起下一个请求之前更新授权头。

httpOptions.headers =
  httpOptions.headers.set('Authorization', 'my-new-auth-token');

---

—— END ——