Angular http服务工具类
<p>Angular http服务工具类大致可以分为两个版本，一个是Angular4.3之前位于@angular/http下的Http服务，另一个是Angular4.3之后位于@angular/common/http下HttpClient服务。具体区别可查看https://www.cnblogs.com/54hsh/p/11490711.html</p><p> </p>
<p><strong>1、Angular4.3之前@angular/http下的Http服务工具类</strong></p>
<div style="color: rgba(248, 248, 242, 1); background-color: rgba(39, 40, 34, 1); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre">
<div><span style="color: rgba(249, 38, 114, 1)">import</span> { Injectable } <span style="color: rgba(249, 38, 114, 1)">from</span> <span style="color: rgba(230, 219, 116, 1)">"@angular/core"</span>;</div>
<div><span style="color: rgba(249, 38, 114, 1)">import</span> { Http, Response, RequestOptions, Headers } <span style="color: rgba(249, 38, 114, 1)">from</span> <span style="color: rgba(230, 219, 116, 1)">'@angular/http'</span>;</div>
<div><span style="color: rgba(249, 38, 114, 1)">import</span> { Observable } <span style="color: rgba(249, 38, 114, 1)">from</span> <span style="color: rgba(230, 219, 116, 1)">'rxjs/Observable'</span>;</div>
<div><span style="color: rgba(249, 38, 114, 1)">import</span> <span style="color: rgba(230, 219, 116, 1)">'rxjs/add/operator/catch'</span>;</div>
<div><span style="color: rgba(249, 38, 114, 1)">import</span> <span style="color: rgba(230, 219, 116, 1)">'rxjs/add/operator/map'</span>;</div>
<br>
<div><span style="color: rgba(102, 217, 239, 1); font-style: italic">const</span> options <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(249, 38, 114, 1)">new</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">RequestOptions</span>({</div>
<div> withCredentials: <span style="color: rgba(174, 129, 255, 1)">true</span>,</div>
<div> headers: <span style="color: rgba(249, 38, 114, 1)">new</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Headers</span>({ <span style="color: rgba(230, 219, 116, 1)">'X-Requested-With'</span>: <span style="color: rgba(230, 219, 116, 1)">'XMLHttpRequest'</span> })</div>
<div>});</div>
<br>
<div>@<span style="color: rgba(166, 226, 46, 1)">Injectable</span>()</div>
<div><span style="color: rgba(249, 38, 114, 1)">export</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">class</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">HttpUtil</span> {</div>
<div> <span style="color: rgba(249, 38, 114, 1)">private</span> baseUrl<span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>;</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">constructor</span>(<span style="color: rgba(249, 38, 114, 1)">private</span> <span style="color: rgba(253, 151, 31, 1); font-style: italic">http</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Http</span>) {</div>
<div> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(230, 219, 116, 1)">'http://localhost:8080'</span>;</div>
<div> }</div>
<br>
<div> <span style="color: rgba(166, 226, 46, 1)">get</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送get请求，url：'</span>, url)</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.http.<span style="color: rgba(166, 226, 46, 1)">get</span>(url, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">catch</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError);</div>
<div> }</div>
<br>
<div> <span style="color: rgba(166, 226, 46, 1)">post</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>, <span style="color: rgba(253, 151, 31, 1); font-style: italic">params</span><span style="color: rgba(249, 38, 114, 1)">?:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送post请求，url：'</span>, url, <span style="color: rgba(230, 219, 116, 1)">'，params:'</span>, params);</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.http.<span style="color: rgba(166, 226, 46, 1)">post</span>(url, params, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">catch</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError);</div>
<div> }</div>
<br>
<div> <span style="color: rgba(166, 226, 46, 1)">put</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>, <span style="color: rgba(253, 151, 31, 1); font-style: italic">params</span><span style="color: rgba(249, 38, 114, 1)">?:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送put请求，url：'</span>, url, <span style="color: rgba(230, 219, 116, 1)">'，params:'</span>, params);</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.http.<span style="color: rgba(166, 226, 46, 1)">put</span>(url, params, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">catch</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError);</div>
<div> }</div>
<br>
<div> <span style="color: rgba(166, 226, 46, 1)">delete</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送delete请求，url：'</span>, url);</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.http.<span style="color: rgba(166, 226, 46, 1)">delete</span>(url, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">catch</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError);</div>
<div> }</div>
<br>
<div> <span style="color: rgba(166, 226, 46, 1)">postForm</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>, <span style="color: rgba(253, 151, 31, 1); font-style: italic">params</span><span style="color: rgba(249, 38, 114, 1)">?:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">let</span> formData<span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">FormData</span> <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(249, 38, 114, 1)">new</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">FormData</span>();</div>
<div> formData.<span style="color: rgba(166, 226, 46, 1)">append</span>(<span style="color: rgba(230, 219, 116, 1)">'username'</span>, params.username);</div>
<div> formData.<span style="color: rgba(166, 226, 46, 1)">append</span>(<span style="color: rgba(230, 219, 116, 1)">'password'</span>, params.password);</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.<span style="color: rgba(166, 226, 46, 1)">post</span>(url, formData);</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">private</span> <span style="color: rgba(166, 226, 46, 1)">extractData</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">response</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Response</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'提取数据：'</span>, response);</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">let</span> body <span style="color: rgba(249, 38, 114, 1)">=</span> response.<span style="color: rgba(166, 226, 46, 1)">json</span>();</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> body <span style="color: rgba(249, 38, 114, 1)">||</span> {};</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">private</span> <span style="color: rgba(166, 226, 46, 1)">handleError</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">error</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Response</span> <span style="color: rgba(249, 38, 114, 1)">|</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">let</span> errMsg<span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">if</span> (error <span style="color: rgba(249, 38, 114, 1)">instanceof</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Response</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">const</span> body <span style="color: rgba(249, 38, 114, 1)">=</span> error.<span style="color: rgba(166, 226, 46, 1)">json</span>() <span style="color: rgba(249, 38, 114, 1)">||</span> <span style="color: rgba(230, 219, 116, 1)">''</span>;</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">const</span> err <span style="color: rgba(249, 38, 114, 1)">=</span> body.error <span style="color: rgba(249, 38, 114, 1)">||</span> <span style="color: rgba(102, 217, 239, 1)">JSON</span>.<span style="color: rgba(102, 217, 239, 1)">stringify</span>(body);</div>
<div> errMsg <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(230, 219, 116, 1)">`</span><span style="color: rgba(249, 38, 114, 1)">${</span>error.status<span style="color: rgba(249, 38, 114, 1)">}</span><span style="color: rgba(230, 219, 116, 1)"> - </span><span style="color: rgba(249, 38, 114, 1)">${</span>error.statusText <span style="color: rgba(249, 38, 114, 1)">||</span> <span style="color: rgba(230, 219, 116, 1)">''</span><span style="color: rgba(249, 38, 114, 1)">}</span><span style="color: rgba(230, 219, 116, 1)"> </span><span style="color: rgba(249, 38, 114, 1)">${</span>err<span style="color: rgba(249, 38, 114, 1)">}</span><span style="color: rgba(230, 219, 116, 1)">`</span>;</div>
<div> } <span style="color: rgba(249, 38, 114, 1)">else</span> {</div>
<div> errMsg <span style="color: rgba(249, 38, 114, 1)">=</span> error.message <span style="color: rgba(249, 38, 114, 1)">?</span> error.message <span style="color: rgba(249, 38, 114, 1)">:</span> error.<span style="color: rgba(166, 226, 46, 1)">toString</span>();</div>
<div> }</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">error</span>(<span style="color: rgba(230, 219, 116, 1)">'异常信息：'</span>, errMsg);</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> Observable.<span style="color: rgba(166, 226, 46, 1)">throw</span>(errMsg);</div>
<div> }</div>
<br>
<div>}</div>
</div>
<p> </p>
<p><strong>2、<strong>Angular4.3之后</strong>@angular/common/http下的HttpClient服务工具类</strong><span style="background-color: rgba(39, 40, 34, 1); font-family: Consolas, "Courier New", monospace; white-space: pre; color: rgba(249, 38, 114, 1)"><br></span></p>
<div style="color: rgba(248, 248, 242, 1); background-color: rgba(39, 40, 34, 1); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre">
<div><span style="color: rgba(249, 38, 114, 1)">import</span> { Injectable } <span style="color: rgba(249, 38, 114, 1)">from</span> <span style="color: rgba(230, 219, 116, 1)">"@angular/core"</span>;</div>
<div><span style="color: rgba(249, 38, 114, 1)">import</span> { HttpClient, HttpHeaders } <span style="color: rgba(249, 38, 114, 1)">from</span> <span style="color: rgba(230, 219, 116, 1)">'@angular/common/http'</span>;</div>
<div><span style="color: rgba(249, 38, 114, 1)">import</span> { Observable } <span style="color: rgba(249, 38, 114, 1)">from</span> <span style="color: rgba(230, 219, 116, 1)">'rxjs'</span>;</div>
<div><span style="color: rgba(249, 38, 114, 1)">import</span> { map, catchError } <span style="color: rgba(249, 38, 114, 1)">from</span> <span style="color: rgba(230, 219, 116, 1)">'rxjs/operators'</span>;</div>
<br>
<div><span style="color: rgba(102, 217, 239, 1); font-style: italic">const</span> options <span style="color: rgba(249, 38, 114, 1)">=</span> {</div>
<div> headers: <span style="color: rgba(249, 38, 114, 1)">new</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">HttpHeaders</span>({<span style="color: rgba(230, 219, 116, 1)">'Content-Type'</span>: <span style="color: rgba(230, 219, 116, 1)">'application/json'</span>})</div>
<div>}</div>
<br>
<div>@<span style="color: rgba(166, 226, 46, 1)">Injectable</span>()</div>
<div><span style="color: rgba(249, 38, 114, 1)">export</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">class</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">HttpClientUtil</span> {</div>
<div> <span style="color: rgba(249, 38, 114, 1)">private</span> baseUrl<span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>;</div>
<br>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">constructor</span>(<span style="color: rgba(249, 38, 114, 1)">private</span> <span style="color: rgba(253, 151, 31, 1); font-style: italic">httpClient</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">HttpClient</span>) {</div>
<div> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(230, 219, 116, 1)">'http://localhost:8080'</span>;</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">public</span> <span style="color: rgba(166, 226, 46, 1)">get</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送get请求，url：'</span>, url);</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.httpClient.<span style="color: rgba(166, 226, 46, 1)">get</span>(url, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">pipe</span>(<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData), <span style="color: rgba(166, 226, 46, 1)">catchError</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError));</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">public</span> <span style="color: rgba(166, 226, 46, 1)">post</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>, <span style="color: rgba(253, 151, 31, 1); font-style: italic">params</span><span style="color: rgba(249, 38, 114, 1)">?:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送post请求，url：'</span>, url, <span style="color: rgba(230, 219, 116, 1)">'，params:'</span>, params);</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.httpClient.<span style="color: rgba(166, 226, 46, 1)">post</span>(url, params, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">pipe</span>(<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData), <span style="color: rgba(166, 226, 46, 1)">catchError</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError));</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">public</span> <span style="color: rgba(166, 226, 46, 1)">put</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>, <span style="color: rgba(253, 151, 31, 1); font-style: italic">params</span><span style="color: rgba(249, 38, 114, 1)">?:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送put请求，url：'</span>, url, <span style="color: rgba(230, 219, 116, 1)">'，params:'</span>, params);</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.httpClient.<span style="color: rgba(166, 226, 46, 1)">put</span>(url, params, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">pipe</span>(<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData), <span style="color: rgba(166, 226, 46, 1)">catchError</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError));</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">public</span> <span style="color: rgba(166, 226, 46, 1)">delete</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'发送delete请求，url：'</span>, url);</div>
<div> url <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.baseUrl <span style="color: rgba(249, 38, 114, 1)">+</span> url;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.httpClient.<span style="color: rgba(166, 226, 46, 1)">delete</span>(url, options)</div>
<div> .<span style="color: rgba(166, 226, 46, 1)">pipe</span>(<span style="color: rgba(166, 226, 46, 1)">map</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.extractData), <span style="color: rgba(166, 226, 46, 1)">catchError</span>(<span style="color: rgba(253, 151, 31, 1)">this</span>.handleError));</div>
<div> }</div>
<br>
<div> <span style="color: rgba(166, 226, 46, 1)">postForm</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">url</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>, <span style="color: rgba(253, 151, 31, 1); font-style: italic">params</span><span style="color: rgba(249, 38, 114, 1)">?:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">let</span> formData<span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">FormData</span> <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(249, 38, 114, 1)">new</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">FormData</span>();</div>
<div> formData.<span style="color: rgba(166, 226, 46, 1)">append</span>(<span style="color: rgba(230, 219, 116, 1)">'username'</span>, params.username);</div>
<div> formData.<span style="color: rgba(166, 226, 46, 1)">append</span>(<span style="color: rgba(230, 219, 116, 1)">'password'</span>, params.password);</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> <span style="color: rgba(253, 151, 31, 1)">this</span>.<span style="color: rgba(166, 226, 46, 1)">post</span>(url, formData);</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">private</span> <span style="color: rgba(166, 226, 46, 1)">extractData</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">response</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Response</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">log</span>(<span style="color: rgba(230, 219, 116, 1)">'提取数据：'</span>, response);</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">let</span> data <span style="color: rgba(249, 38, 114, 1)">=</span> response.<span style="color: rgba(166, 226, 46, 1)">json</span>();</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> data <span style="color: rgba(249, 38, 114, 1)">||</span> {};</div>
<div> }</div>
<br>
<div> <span style="color: rgba(249, 38, 114, 1)">private</span> <span style="color: rgba(166, 226, 46, 1)">handleError</span>(<span style="color: rgba(253, 151, 31, 1); font-style: italic">error</span><span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Response</span> <span style="color: rgba(249, 38, 114, 1)">|</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">any</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">let</span> errMsg<span style="color: rgba(249, 38, 114, 1)">:</span> <span style="color: rgba(102, 217, 239, 1); font-style: italic">string</span>;</div>
<div> <span style="color: rgba(249, 38, 114, 1)">if</span> (error <span style="color: rgba(249, 38, 114, 1)">instanceof</span> <span style="color: rgba(166, 226, 46, 1); text-decoration-line: underline">Response</span>) {</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">const</span> data <span style="color: rgba(249, 38, 114, 1)">=</span> error.<span style="color: rgba(166, 226, 46, 1)">json</span>() <span style="color: rgba(249, 38, 114, 1)">||</span> <span style="color: rgba(230, 219, 116, 1)">''</span>;</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">const</span> err <span style="color: rgba(249, 38, 114, 1)">=</span> data.toString <span style="color: rgba(249, 38, 114, 1)">||</span> <span style="color: rgba(102, 217, 239, 1)">JSON</span>.<span style="color: rgba(102, 217, 239, 1)">stringify</span>(data);</div>
<div> errMsg <span style="color: rgba(249, 38, 114, 1)">=</span> <span style="color: rgba(230, 219, 116, 1)">`</span><span style="color: rgba(249, 38, 114, 1)">${</span>error.status<span style="color: rgba(249, 38, 114, 1)">}</span><span style="color: rgba(230, 219, 116, 1)"> - </span><span style="color: rgba(249, 38, 114, 1)">${</span>error.statusText <span style="color: rgba(249, 38, 114, 1)">||</span> <span style="color: rgba(230, 219, 116, 1)">''</span><span style="color: rgba(249, 38, 114, 1)">}</span><span style="color: rgba(230, 219, 116, 1)"> </span><span style="color: rgba(249, 38, 114, 1)">${</span>err<span style="color: rgba(249, 38, 114, 1)">}</span><span style="color: rgba(230, 219, 116, 1)">`</span>;</div>
<div> } <span style="color: rgba(249, 38, 114, 1)">else</span> {</div>
<div> errMsg <span style="color: rgba(249, 38, 114, 1)">=</span> error.message <span style="color: rgba(249, 38, 114, 1)">?</span> error.message <span style="color: rgba(249, 38, 114, 1)">:</span> error.<span style="color: rgba(166, 226, 46, 1)">toString</span>();</div>
<div> }</div>
<div> <span style="color: rgba(102, 217, 239, 1); font-style: italic">console</span>.<span style="color: rgba(102, 217, 239, 1)">error</span>(<span style="color: rgba(230, 219, 116, 1)">'异常处理：'</span>, errMsg);</div>
<div> <span style="color: rgba(249, 38, 114, 1)">return</span> Observable.<span style="color: rgba(166, 226, 46, 1)">throw</span>(errMsg);</div>
<div> }</div>
<div>}</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
千万不要试图去研究 研究了很久都整不明白的东西，或许是层次不到，境界未到，也或许是从未在实际的应用场景接触过，这种情况下去研究，只会事倍功半，徒劳一番罢了。能做的就是不断的沉淀知识，保持一颗积极向上的学习心态，相信终有一天所有的困难都会迎刃而解。<br><br>
来源：https://www.cnblogs.com/54hsh/p/11512818.html
頁:
[1]