Ionic HTTP 请求

Ionic HTTP 请求

Ionic 的 http 请求真的事让我有点小小的懵逼，懵逼树下懵逼果，懵逼树下你和我。因为请求需要带有token验证，但是自己有是一个小白，第一次接触Ionic，根本不知道该怎样去实现，尝试着写，好不容易有点成效，记录一下。

首先说明一下，使用下边方法如果浏览器可以请求到但是真机不行，就看一下这篇博文，可能是这个原因
https://www.cnblogs.com/wjw1014/p/12522263.html

使用工具类

首先在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) {
    //console.log('Hello HttpProvider Provider');
  }

  /**
   * post请求
   * @param url 相对路径
   * @param params 参数
   */
  public post(url, params:any):Observable<any> {
    //console.log("此时token：",AppConfig.token)
    return this.httpClient.post(this.baseServerUrl + url,params,{
      headers:{
        'Content-Type': 'application/json',
        'cookie': AppConfig.token,
        'Request-Origin': 'app'
      }
    })
  }

  /**
   * get方法
   * @param url 相对路径
   * @param params 参数
   */
  public get(url,params:any):Observable<any>{
    //console.log("此时token：",AppConfig.token)
    return this.httpClient.get(this.baseServerUrl + url,{
      headers:{
        'Content-Type': 'application/json',
        'cookie': '' + AppConfig.token,
        'Request-Origin': 'app'
      },
      params:params
    })
  }

}

创建存放token的文件

因为我们需要进行身份认证，也就是请求的时候需要携带token，所以说我创建了一个文件用来存放登录成功后返回的token。
在app目录下创建一个 app.config.ts 文件，文件内容如下：

export class AppConfig{
  public static token: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.token = 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.token = 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赋值了，相关那段代码删掉就行了。