Ionic HTTP 请求

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

使用工具类

首先在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',
        'X-Access-Token': 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',
        'X-Access-Token': '' + 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('登录失败');
})

大体就是这个样子。

来源：https://www.cnblogs.com/wjw1014/p/12516190.html

标签

token

token验证失败

软件

ionic

http请求

angular