Angular实战记录---HttpClient之URL过长

背景

要保存的数据过大，以至于URL后面接了太长的参数，最终后台报500。检查了下，已然使用的是POST方式。秉承简单方便（tou jiangshua hua)的态度，就想在Angular自带的HttpClient上做文章。别说，人家Angular就是牛皮。直接上jsonp()

HttpClient的Jesonp

介绍

构造一个 Observable，订阅它将经过拦截器管道处理之后发送一个特殊的 JSONP 请求。
使用指定的 URL 和回调函数名构造一个 JSONP 请求。

jsonp(url: string, callbackParam: string): Observable

参数
url string
callbackParam string
返回值
一个 Object 型响应对象组成的 Observable 对象使用指定的 URL 和回调函数名构造一个 JSONP 请求。

使用

jsonp(url: string, callbackParam: string): Observable
参数
url string
callbackParam string
返回值
一个 T 型响应对象组成的 Observable 对象

特别说明

必须安装一个合适的拦截器（HttpClientJsonpModule）。 如果没有这个拦截器，JSONP 请求就可能被后端拒绝。

HttpClientJsonpModule为Jesonp保驾护航

class HttpClientJsonpModule {
}
通过把拦截器提供为内置的 DI 令牌 HTTP_INTERCEPTORS（允许有多个），你可以把它们添加到 HttpClient 调用链的后面。

说实话···我真没看懂这是在干啥···哭了···难道今天就是我祭天的日几？？？

实践

1. 引入必要模块

   
   import { HttpClient, HttpHeaders, HttpParams, HttpClientJsonpModule } from '@angular/common/http';
   

2. 配置请求头参数

   const httpOptions = {
     headers: new HttpHeaders({ 'Content-Type': 'application/json' })
   };
   

3. 声明http

   constructor(private http: HttpClient) { }
   

4. 开始写服务模块

   export class appService {
       private _Url = 'http://xxx.xxx.xxx.xxx:8001'; //服务器IP:端口号
         updateModle(id: any, dataList: any): Observable<any> {
   	    const params = `?Id=${id}&dataList=${JSON.stringify(dataList)}`;
   	    const url = `${this._Url}/saveDataAPI/`;
   	    return this.http.jsonp<any>(url, params).pipe(
   	      tap(data => this._log(`updateModle`)),
   	      catchError(this._handleError<any>('updateModle'))
   	    );
   	  }
   }