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('登录失败');
})
大体就是这个样子。