ionic5程式碼片段：HTTP網路請求

作者：neo yang 時間：2020/04/18 讀： 8081

---

使用版本：ionic5和angular8

一、GET

1、app.module.js

開頭引入：

import { HttpClientModule } 從 '@angular/common/http';

imports中加入：

imports: [
     ...
     HttpClientModule,
     ...
     ],

2、頁面的ts檔案（xxx.page.ts）中

開頭引入：

import { HttpClient} 從 '@angular/common/http';

constructor中：

constructor( 
   private http: HttpClient
  ) { }

ngOnInit()或其它函數中：

var url = "https://xxxxxx" ;    
this.http.get(url).subscribe(
    data => {
      console.log(data);
      },
    error => {
      console.log('error');
      })

2、POST

1、app.module.js

同GET。

2、頁面的ts檔案（xxx.page.ts）中

開頭引入：（注意引入HttpHeaders，post請求要設定header）

import { HttpClient , HttpHeaders} 從 '@angular/common/http';

constructor中：

同GET。

ngOnInit()或其它函數中：

var url = "https://xxxxxx" ; 
const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
 };
this.http.post('url',{
    key1: value1,
    key2: value2
  } ,httpOptions)

• header中'Content-Type': 'application/json'是常見的header。根據你的需要配置。
• key和value，為post的參數。

3、JSONP

1、app.module.js

開頭引入：

import { HttpClientModule,HttpClientJsonpModule } 從 '@angular/common/http';

imports中加入：

imports: [
     ...
     HttpClientModule,
     HttpClientJsonpModule,
     ...
     ],

2、頁面的ts檔案（xxx.page.ts）中

開頭引入：

同GET。

constructor中：

同GET。

ngOnInit()或其它函數中：

var url="https://xxxxxx"; this.http.jsonp(url,"callback").subscribe(
    data=>{
        console.log(data);
    },error=>{
        console.log('error');
    })