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 {

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{

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’,

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
转存中…(img-4YNwZWXx-1714871003262)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！