内科 發表於 2020-7-5 10:50:00

Angular数据请求（get,post）

<p><span style="font-size: 18px">一、Angular get请求数据</span></p>
<p><span style="font-size: 18px">Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。</span></p>
<p><span style="font-size: 18px"><span class="src" data-group="0-0">1、在app.module.<span class="src" data-group="0-1">ts中引入HttpClientModule并注入</span></span></span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import {HttpClientModule} from '@angular/common/http'</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1); font-size: 16px">imports:[
    BrowserModule,
    HttpClientModule
]</span></pre>
</div>
<p><span style="font-size: 18px">2、在用到的地方引入HttpClient并在构造函数声明</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import {HttpClient} from "@angular/common/http";</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">constructor(public http:Httpclient) {}</span></pre>
</div>
<p><span class="src" style="font-size: 18px" data-group="0-0">3.<span class="Apple-converted-space">&nbsp;<span class="src" data-group="0-1">get请求数据</span></span></span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px"><span style="color: rgba(0, 0, 255, 1)">var</span> url= "http://127.0.0.1:8080/api/productlist"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.http.get(url).subscribe (response =&gt;<span style="color: rgba(0, 0, 0, 1)">{
    console.log(response);
})</span></span></pre>
</div>
<p>&nbsp;</p>
<p><span style="font-size: 18px">二、Angular post提交数据</span></p>
<p><span style="font-size: 18px">Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。</span></p>
<p><span style="font-size: 18px">1、在app.module.ts</span><span style="font-size: 18px">中引入HttpClientModule注入</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import {HttpClientModule} from '@angular/common/http'</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">imports:[
    BrowserModule,
    HttpClientModule
]</span></pre>
</div>
<p><span style="font-size: 18px">2、在用到的地方引入HttpClient、HttpHeaders并在构造函数声明HttpClient</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import {HttpClient, HttpHeaders} from "@angular/common/http";</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">constructor(public http:Httpclient) {}</span></pre>
</div>
<p><span style="font-size: 18px">3, post提交数据</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> url="http://127.0.0.1:8080/doLogin"<span style="color: rgba(0, 0, 0, 1)">;
</span></pre>
<pre>this.http.post(url, {"age":22,"username":"zl"})<br>.subscribe((response)=&gt;{<br>    console.log(response)<br>})</pre>
</div>
<p>&nbsp;</p>
<p><span style="font-size: 18px">三、Angular Jsonp请求数据</span></p>
<p><span style="font-size: 18px">1、在app.module.ts中引入HttpClientModule, HttpClientJsonpModule并注入</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import {HttpClientModule,HttpclientJsonpModule} from@angular/common/http';</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1); font-size: 16px">imports:[
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
]</span></pre>
</div>
<p><span style="font-size: 18px">2、在用到的地方引入h</span><span style="font-size: 18px">ttpClient并在构造函数声明</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import {HttpClient} from "@angular/common/http";</span></pre>
</div>
<p><span style="font-size: 18px">3, post提交数据</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">var url="http://127.0.0.1:8080/doLogin";
</span></pre>
<pre><span style="font-size: 16px">this.http.jsonp(url,"callback").subscribe((response:any)=&gt;{</span><br><span style="font-size: 16px">this.userList=response;</span><br><span style="font-size: 16px">console.log(response)</span><br><span style="font-size: 16px">})</span></pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-size: 18px">四、Angular中使用第三方模块axios请求数据</span></p>
<p><span style="font-size: 18px">1、安装axios</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">cnpm install axios --save</span></pre>
</div>
<p><span style="font-size: 18px">2、用到的地方引入axios</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import axios from 'axios";</span></pre>
</div>
<p><span style="font-size: 18px">3,get请求</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> url= "http://127.0.0.1:8080/api/productlist"<span style="color: rgba(0, 0, 0, 1)">;
axios.get(</span>url<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)"> (response){
      console.log(response)
　　)}<br></span></pre>
</div>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-size: 18px">五，在服务（service）中通过Promise封装请求</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px"><span style="color: rgba(0, 0, 0, 1)">get(api){
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">new</span> Promise((resolve, reject)=&gt;<span style="color: rgba(0, 0, 0, 1)">{
         </span><span style="color: rgba(0, 0, 255, 1)">this</span>.http.get(api).subscribe( (response)=&gt;<span style="color: rgba(0, 0, 0, 1)">{
             resolve(response);
      })   
    })
}</span></span></pre>
</div>
<p>&nbsp;</p>
<p><span style="font-size: 18px">在用到的组件中引入服务，然后调用方法</span></p>
<div class="cnblogs_code">
<pre><span style="font-size: 16px">import { CommonService } from '../../services/common.service'<span style="color: rgba(0, 0, 0, 1)">;

constructor(public common:CommonService) { }


</span><span style="color: rgba(0, 0, 255, 1)">this</span>.common.get(api).then((response)-&gt;<span style="color: rgba(0, 0, 0, 1)">{
   console. log (response);
   })</span></span></pre>
</div>
<p>&nbsp;</p>

</div>
<div id="MySignature" role="contentinfo">
    心有所想，必有回响<br><br>
来源：https://www.cnblogs.com/zhulei2/p/13235366.html
頁: [1]
查看完整版本: Angular数据请求（get,post）