0
点赞
收藏
分享

微信扫一扫

Ionic HTTP 请求

少_游 2022-06-23 阅读 37

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',
'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赋值了,相关那段代码删掉就行了。

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!


【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​​


举报

相关推荐

http请求

HTTP请求

HTTP 请求报文

http请求流程

http请求走私

QML HTTP 请求

HTTP 请求走私

0 条评论