angular httpClient大全
<div class="page" title="Page 1"><div class="layoutArea">
<div class="column">
<ul>
<li>引入来自it营</li>
</ul>
<p>Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。</p>
<p>使用步骤：</p>
<div class="page" title="Page 1">
<div class="layoutArea">
<div class="column">
<p>1、在 app.module.ts 中引入 并注入<br>
</p>
<div class="cnblogs_code">
<pre><span style="font-size: 14px">import {HttpClientModule} from '@angular/common/http'<span style="color: rgba(0, 0, 0, 1)">;
imports: [
HttpClientModule
]</span></span></pre>
</div>
<p>2、在你需要用的组件中引入HttpClient 并在构造函数中声明</p>
<div class="cnblogs_code">
<pre>import {HttpClient，HttpParams, HttpHeaders} from "@angular/common/http";<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">如果需要设置请求头和请求参数，则引入HttpParams, HttpHeaders</span>
constructor(public http:HttpClient) { } </pre>
</div>
<p> </p>
<p>3、get请求数据</p>
<div class="cnblogs_code">
<pre><span style="font-size: 14px"><span style="color: rgba(0, 0, 255, 1)">var</span> api =<span style="color: rgba(0, 0, 0, 1)"> url;<br></span></span></pre>
<div><span style="font-size: 14px"> dataSource:any[]=[];</span></div>
<pre><span style="font-size: 14px"><span style="color: rgba(0, 0, 0, 1)">const params</span>=<span style="color: rgba(0, 0, 255, 1)">new</span> HttpParams().set(‘currentpage’,1<span style="color: rgba(0, 0, 0, 1)">).set();
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.http.get(api,{params:<span style="color: rgba(0, 0, 255, 1)">new</span> HttpParams().set('type','1'),headers}).subscribe((response:any)=><span style="color: rgba(0, 0, 0, 1)"> { //<span style="color: rgba(255, 0, 0, 1)">这里的response一定要加any类型，不然下面的result无法定义
</span></span><span style="color: rgba(0, 0, 255, 1)">if</span>(response['code']==200<span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.data=<span style="color: rgba(0, 0, 0, 1)">response.result;
}
});</span></span></pre>
</div>
<p>4、post请求</p>
<div class="cnblogs_code">
<pre>const httpOptions =<span style="color: rgba(0, 0, 0, 1)"> {
headers: </span><span style="color: rgba(0, 0, 255, 1)">new</span> HttpHeaders({ 'Content-Type': 'application/json'<span style="color: rgba(0, 0, 0, 1)"> })
};
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.http.post(api,{username:'张三',age:'20'},httpOptions).subscribe((response:any)=><span style="color: rgba(0, 0, 0, 1)"> {
console.log(response);
});</span></pre>
</div>
<p> </p>
<p>5、jsonp请求数据</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"><strong>在appmodulets中导入HttpClientJsonpModule</strong>
import {HttpClientModule,HttpClientJsonpModule} from </span>'@angular/common/http'<span style="color: rgba(0, 0, 0, 1)">;
imports: [ BrowserModule, HttpClientModule, HttpClientJsonpModule]</span></pre>
</div>
<div class="cnblogs_code">
<pre><strong>在需要的组件中导入HttpClient,并注入</strong><br>import {HttpClient} from "@angular/common/http"<span style="color: rgba(0, 0, 0, 1)">;
constructor(public http:HttpClient) { }</span></pre>
</div>
<div class="cnblogs_code">
<pre><strong><span style="color: rgba(0, 0, 0, 1)">jsonp数据
</span></strong><span style="color: rgba(0, 0, 255, 1)">var</span> api = "http://a.itying.com/api/productlist"; <span style="color: rgba(0, 0, 255, 1)">this</span>.http.jsonp(api,'callback').subscribe(response =><span style="color: rgba(0, 0, 0, 1)"> {
console.log(response); });</span></pre>
</div>
<p>6、Angular 中使用第三方模块 axios 请求数据</p>
<div class="cnblogs_code">
<pre>1<span style="color: rgba(0, 0, 0, 1)">、安装 axios
cnpm install axios </span>--save</pre>
</div>
<div class="cnblogs_code">
<pre>2<span style="color: rgba(0, 0, 0, 1)">、用到的地方引入 axios
import axios from </span>'axios';</pre>
</div>
<div class="cnblogs_code">
<pre>3<span style="color: rgba(0, 0, 0, 1)">、使用
axios.get(</span>'/user?ID=12345') .then(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (response) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> handle success</span>
<span style="color: rgba(0, 0, 0, 1)">console.log(response); })
.</span><span style="color: rgba(0, 0, 255, 1)">catch</span>(<span style="color: rgba(0, 0, 255, 1)">function</span> (error) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> handle error console.log(error);</span>
<span style="color: rgba(0, 0, 0, 1)">})
.then(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> always executed });</span></pre>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/jahoon/p/13580107.html
頁:
[1]