[morse]Ionic 4 Native HTTP Plugin

與傳統的JavaScript HTTP調用相比，進行本機服務器調用具有優勢。在基於Android和IOS的本機應用程序中進行本機HTTP調用。它提供了更高的安全性和更好的呼叫處理功能。



它的一些優點如下：

1.後台線程：所有請求都像本地應用程序一樣在後台線程中完成。

2.HTTP代碼401的處理：在未經授權訪問服務器時，使用基於JavaScript的HTTP調用未正確處理該錯誤代碼401，但未正確訪問服務器。

3.SSL固定：固定用於提高服務的安全性。它用於創建進行通信的安全身份。


在這裡，我們將blank通過運行以下命令使用模板創建一個新的Ionic應用程序：

ionic start ionicHTTP blank

cd ionicHTTP

安裝本機HTTP插件

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install @ionic-native/http

導入應用程序模塊

要在應用程序中使用HTTP方法，請打開app.module.ts文件以導入HTTP類，然後添加provider數組，如下所示：

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
 
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
 
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
 
import { HTTP } from '@ionic-native/http/ngx';
 
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    HTTP,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

要在組件中使用HTTP Native插件，請首先導入HTTP類，然後添加constructor來使用其方法：

//home.page.ts
import { Component } from '@angular/core';
 
import { HTTP } from '@ionic-native/http/ngx';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  constructor(
    private http: HTTP
  ) {
...
...
}

此本機插件的 HTTP 類提供了一些同步和異步方法：


異步功能

這種功能的類別包括 sendRequest 將方法，如 post，get，put，patch，delete，head，uploadFile和 downloadFile。

它們與前兩個參數採用URL和對options像一起使用，後兩個參數與success和error回調一起使用。

檢查此常見格式以進行 sendRequest HTTP 調用：

this.http.sendRequest('https://google.com/',
      {
        method: 'post',
        data: { id: 12, message: 'test' },
        headers: { Authorization: 'OAuth2: token' },
        timeout: 5000
      }
    )
      .then(response => {
        // prints 200
        console.log(response.status);
      })
      .catch(response => {
        // prints 403
        console.log(response.status);
 
        // prints Permission denied
        console.log(response.error);
      });
 

成功回調

then()方法返回具有4個屬性的對象：

status是HTTP響應代碼，為數字值。

data是來自服務器的字符串響應。

url是任何重定向後以字符串形式獲得的最終URL。

標頭是帶有標頭的對象。

{
  status: 200,
  data: '{"id": 12, "message": "test"}',
  url: 'http://example.net/rest'
  headers: {
    'content-length': '247'
  }
}

失敗回調

catch()方法返回具有4個屬性的對象：

status是HTTP響應代碼，是一個數字值。

錯誤是服務器以字符串形式返回的錯誤響應。

url是任何重定向後以字符串形式獲得的最終URL。

標頭是帶有標頭的對象。

{
  status: 403,
  error: 'Permission denied',
  url: 'http://example.net/noperm'
  headers: {
    'content-length': '247'
  }
}

我們還可以使用特定的請求類型：

請求類型POST，GET，PUT，PATCH，DELETE和HEAD佔用3個參數對象：



網址：URL來發送請求

參數：參數與請求發送

標題：標題來設置此要求

例如，下面是使用POST來自API端點的JSON數據響應的方法：

    this.http.post(
      'https://google.com/',             //URL
      {id: 12, message: 'test'},         //Data 
      { Authorization: 'OAuth2: token' } // Headers
     )
     .then(response => {
        // prints 200
        console.log(response.status);
        try {
          response.data = JSON.parse(response.data);
          // prints test
          console.log(response.data.message);
        } catch(e) {
          console.error('JSON parsing error');
        }
     })
     .catch(response => {
       // prints 403
       console.log(response.status);
 
       // prints Permission denied
       console.log(response.error);
     });

上傳文件

為了將文件保存在服務器上，我們使用uploadFile帶有4個參數的方法：

網址：URL來發送請求

體：該請求的主體

頭：標頭為此請求設置

文件路徑：要上傳的文件的本地路徑

名：參數的名稱傳遞下去作為文件

    this.http.uploadFile(
      'https://google.com/',
      { id: '12', message: 'test' },
      { Authorization: 'OAuth2: token' },
      'file:///somepicture.jpg',
      'myPictureName'
    )
      .then(response => {
        // prints 200
        console.log(response.status);
      })
      .catch(response => {
        // prints 403
        console.log(response.status);
        // prints Permission denied
        console.log(response.error);
      });

下載文件

要從服務器下載文件，有一種downloadFile方法需要四個參數：



url：將請求發送到

正文的url ：請求

標頭的正文：為此請求設置的標頭

filePath：下載文件的路徑，包括文件名。

    this.http.downloadFile(
      'https://google.com/',
      { id: '12', message: 'test' },
      { Authorization: 'OAuth2: token' },
      'file:///somepicture.jpg'
    )
      .then(response => {
        // prints 200
        console.log(response.status);
      })
      .catch(response => {
        // prints 403
        console.log(response.status);
        // prints Permission denied
        console.log(response.error);
      });

Ionic的Native HTTP插件還提供了同步功能，用於獲取身份驗證標頭，設置或獲取Cookie以及設置標頭。您可以在此處查看更多信息。