Ionic HTTP 請求

Ionic HTTP 請求

Ionic 的 http 請求真的事讓我有點小小的懵逼，懵逼樹下懵逼果，懵逼樹下你和我。因爲請求需要帶有token驗證，但是自己有是一個小白，第一次接觸Ionic，根本不知道該怎樣去實現，嘗試着寫，好不容易有點成效，記錄一下。

注意：真機測試可能遇到問題，如果請求失敗，看一下這篇博文，可能是這個原因！
https://blog.csdn.net/weixin_42776111/article/details/104960505

使用工具類

首先在app同級下創建一個文件夾providers，用來存放http請求工具類。
在 providers 文件夾下創建一個 http 文件夾，http文件夾下創建一個 http.ts 文件。
工具類內容如下：

import { HttpClient, HttpResponse } from '@angular/common/http';
import { AppConfig } from './../../app/app.config';

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

/*
  Generated class for the HttpProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class HttpProvider {

  private baseServerUrl = 'http://localhost'  //這個地方是請求的baseUrl

  constructor(public httpClient: HttpClient) {
  }

  /**
   * post請求
   * @param url 相對路徑
   * @param params 參數
   */
  public post(url, params:any):Observable<any> {
    return this.httpClient.post(this.baseServerUrl + url,params,{
      headers:{
        'Content-Type': 'application/json',
        'cookie': AppConfig.cookie,
        'Request-Origin': 'app'
      }
    })
  }

  /**
   * get方法
   * @param url 相對路徑
   * @param params 參數
   */
  public get(url,params:any):Observable<any>{
    return this.httpClient.get(this.baseServerUrl + url,{
      headers:{
        'Content-Type': 'application/json',
        'cookie': '' + AppConfig.cookie,
        'Request-Origin': 'app'
      },
      params:params
    })
  }

}

創建存放token的文件

因爲我們需要進行身份認證，也就是請求的時候需要攜帶token，所以說我創建了一個文件用來存放登錄成功後返回的token。
在app目錄下創建一個 app.config.ts 文件，文件內容如下：

export class AppConfig{
  public static cookie:string = '';
}

當登錄成功之後，把token放到這個值裏面，然後下次攜帶token去後臺請求數據的token就從這裏拿。

注入依賴

在 app.module.ts 文件中注入各種依賴包

import { HttpProvider } from '../providers/http/http';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

注入

  imports: [
    ···
    HttpClientModule,
  ],

注入

providers: [
    ···
    HttpProvider,
  ],

使用

在需要進行http請求的頁面，導入包

import {HttpProvider} from './../../providers/http/http';
import { AppConfig } from './../app.config';

在構造函數中注入依賴

constructor( private httpProvider: HttpProvider,) {}

http get 請求

this.httpProvider.get('/getCheckCode',{}).subscribe((resp => {
    if (!resp.success) {
       return;
    }
    console.log("返回數據",resp);
    }), error => {
    console.error(error);
})

http post 請求

let pa= {
      'username': 'wjw',
      'password': 'wjw'
    }
console.log(pa)
this.httpProvider.post('/login',pa ).subscribe((resp: any) => {
    console.log('登錄成功',resp);
    AppConfig.cookie = resp.result.token  // 登錄成功的token存起來
    }, error => {
    console.log('登錄失敗');
})

大體就是這個樣子。

優化一下

上邊是在登錄成功之後直接手動去拿返回的token，可以寫一個攔截器拿。
在 app 文件夾同級創建一個 interceptors 文件夾存放 攔截器文件。
創建一個 interceptor.config.ts 文件

import { TokenInterceptor } from './token-interceptor';
import { HTTP_INTERCEPTORS } from "@angular/common/http";

export const httpInterceptorProviders  = [
  { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
]

在創建一個 token-interceptor.ts 文件

import { HttpProvider } from './../providers/http/http';
import { AppConfig } from './../app/app.config';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import {  tap } from 'rxjs/operators';
// import { NavController } from 'ionic-angular';

export class TokenInterceptor implements HttpInterceptor{

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    return next.handle(req).pipe(tap((event:HttpResponse<any>)=>{
      if(event instanceof HttpResponse){
        if (event.headers && event.headers.has('Authorization')) { // 這個地方要根據實際去改
          let token = event.headers.get('Authorization');
          AppConfig.cookie = token;
          console.log('token------------->', token);
        }
      }
    },error=>{
      console.log('請求失敗------------->');
      if (error.status == 401) {
        //token失效 重新登錄

        return;
      }
    }));
  }
}

在 app.module.ts 文件中使用

import { httpInterceptorProviders } from '../interceptors/interceptor.config';

providers: [
    ...
    httpInterceptorProviders,
  ],

OK了！ 在登錄成功的時候就不需要我們再去拿token賦值了，相關那段代碼刪掉就行了。