angular 中的 http 请求

校友个 發表於 2019-10-4 12:01:00

angular 中使用 http 请求的前提，需要引入 httpClientModule 模块
根模块中 app.module.ts：
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>import { HttpClientModule } from '@angular/common/http'</div>
<div> </div>
</div>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>imports: [</div>
<div>    BrowserModule,</div>
<div>    AppRoutingModule,</div>
<div>    HttpClientModule</div>
<div>  ],</div>
</div>
组件中：
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>import { HttpClient} from '@angular/common/http'</div>
</div>
 
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div> constructor(public http: HttpClient) { }</div>
</div>
 
<hr>
1. GET 请求写法：
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>getData() {</div>
<div>    let url = '/search/interface/getrelatequery?word=%E6%99%8B%E6%B1%9F'</div>
<div>    this.http.get(url).subscribe((res: any)=>{</div>
<div>      console.log("GET 请求", res)</div>
<div>      this.newsList = res.data.relateQuery</div>
<div>    })</div>
<div>  }</div>
</div>
2. POST 请求写法：
post 请求必须设置请求头
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>import { HttpClient, HttpHeaders } from '@angular/common/http'</div>
</div>
 
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>postData() {</div>
<div>    let api = '/api/message/readnotice'</div>
<div>    let requestData = {</div>
<div>      advert_id: '212'</div>
<div>    }</div>
<div>    let headerOption = { headers: new HttpHeaders({ "Content-Type": 'application/json'})}</div>
<div>    </div>
<div>    this.http.post(api, requestData, headerOption).subscribe((res)=>{</div>
<div>      console.log("POST请求：", res)</div>
<div>    })</div>
<div>  }</div>
</div>
3. jsonp 请求：
jsonp 请求与前两种不同之处在与，除了引入 httpClientModule 之外，还要引入 HttpClientJsonpModule
根模块中：
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http'</div>
</div>
组件中：
如果不引入 HttpClientJsonModule , this.http.jsonp 报错
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div>/**</div>
<div>   * jsonp 解决跨域</div>
<div>   * 使用 JSONP 格式请求数据的前提是 后台必须支持 jsonp 请求， 请求的 api 中带有 callBack 或者 cb</div>
<div>   */</div>
<div>  getJsonpData() {</div>
<div>    let url = '/search/interface/getrelatequery?word=%E6%99%8B%E6%B1%9F'</div>
<div>    this.http.jsonp(url, 'callback').subscribe((res)=>{</div>
<div>      console.log("JSOP 请求数据", res)</div>
<div>    })</div>
<div>  }</div>
</div>
 
<hr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
来源：https://www.cnblogs.com/monkey-K/p/11621788.html

頁: [1]

琼殿技术论坛's Archiver

angular 中的 http 请求