背景
要保存的数据过大,以至于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 调用链的后面。
说实话···我真没看懂这是在干啥···哭了···难道今天就是我祭天的日几???
实践
-
引入必要模块
import { HttpClient, HttpHeaders, HttpParams, HttpClientJsonpModule } from '@angular/common/http';
-
配置请求头参数
const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
-
声明
http
constructor(private http: HttpClient) { }
-
开始写服务模块
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')) ); } }