【鸿蒙实战开发教程】HarmonyOS next开发网络请求封装（Api11Release）

前言

根据研究机构Counterpoint Research发布的最新数据，2024年第一季度，鸿蒙OS份额由去年一季度的8%上涨至17%，iOS份额则从20%下降至16%。这意味着，华为鸿蒙OS在中国市场的份额超越苹果iOS，已成中国第二大操作系统。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

本文主要讲一下鸿蒙开发中网络请求封装

鸿蒙相关版本信息：

HarmonyOS NEXT，Developer Preview2，Api Version 11 Release

电脑系统：macM1 编译器：DevEco Studio NEXT Developer Preview2，4.1.7.300
（API9对应的mac版本的模拟器无法识别的问题在此版本编译器已经修复）

模拟器也是一样的Preview2版本（需要申请）

最近开始基于鸿蒙NEXT版本也就是俗话说的纯血鸿蒙进行开发，本来是不打算写这个文章因为用API9写的时候当时是封装了一套网络请求的，但是～API 11改了一些地方： any 被禁止使用了（这是影响最大的地方其他的改变也造成了一些影响但是我就不过多描写了），然后就导致报错严重！！
在这里插入图片描述

下面就开始进入主题：

首先在module.json5中配置基础网络权限

"requestPermissions": [{"name": "ohos.permission.INTERNET",}
]

定义base常量

我这里base地址使用的wan安卓的api
在这里插入图片描述

封装泛型工具类

在这里插入图片描述

注意data，不能像之前那样

data: T = null

会报错，而且必须都有初始值

封装request

async function requestSync<T>(path: string, method: http.RequestMethod, extraData?: Object): Promise<Response<T>> {return new Promise<Response<T>>((resolve, reject) => {let url = NetConstants.BASE_URL + path;let header: HeaderInterFace = {ApiVersion: '272','Content-Type': 'application/json',platform: '','encryption-mode': 'base64',auth: NetConstants.AUTH,channel: 'JYB',timeout : NetConstants.TIMEOUT}if (method === http.RequestMethod.POST) {header = {ApiVersion: '272','Content-Type': 'application/x-www-form-urlencoded',platform: '','encryption-mode': 'base64',auth: NetConstants.AUTH,channel: 'JYB',timeout : NetConstants.TIMEOUT}}let httpRequest = http.createHttp();hilog.info(0, NetConstants.NET_TAG, `start request, path: ${path}, method: ${method}, extraData: ` + JSON.stringify(extraData));httpRequest.request(url,{method: method,expectDataType: http.HttpDataType.OBJECT,header: header,extraData: extraData},(err, data) => {let res = new Response<T>()if (!err && data.responseCode === 200) {//Object.assign("", "");对象合并if (typeof data.result === 'string') {res.data = JSON.parse(data.result)} else {// Object.assign(res, data.result);res.data = data.result as T}hilog.info(0, NetConstants.NET_TAG, `request success, path: ${path}, result: ${JSON.stringify(res)}`)} else {hilog.error(0, NetConstants.NET_TAG, `request error, path: ${path}, error: ${JSON.stringify(err)}`)res.errorCode = data?.responseCode??-1res.errorMsg = err?.message??""}resolve(res);})})
}//封装接口
export default class Api {private static instance: Api;private constructor() {}static net(): Api {if (Api.instance === undefined) {Api.instance = new Api();}return Api.instance;}async login(username: string, password: string): Promise<Response<UserData>> {return requestSync("/user/login", http.RequestMethod.POST, `username=${username}&password=${password}`);}async logout(): Promise<Response<string>> {return requestSync("/user/logout/json", http.RequestMethod.GET);}async getUserInfo(): Promise<Response<UserData>> {return requestSync("/lg/coin/userinfo/json", http.RequestMethod.GET);}}interface HeaderInterFace {'ApiVersion': string,'Content-Type': string,'platform': string,'encryption-mode': string,'auth': string,'channel': string,'timeout': number
}

我这里没有编写处理token和加密加密相关的，这两个其实也不复杂，大家可以自己添加。

我这里只写了三个接口，但是其实相当于只有一个post请求一个get请求，如果需要delete、put请求自己添加。

试一下：
一个简单的登陆页：

@Entry
@Component
export struct Login {@State showLoading: boolean = false;@State title: string = "登录";private account: string = "";private password: string = "";async login(){if (!this.account) {toast("请输入用户名");return;}if (!this.password) {toast("请输入密码");return;}this.showLoading = true;let res = await Api.net().login(this.account, this.password);this.showLoading = false;if (res.isSuccessWithData()) {toast("登录成功");} else {toast(res.errorMsg);}}build() {Stack(){Column() {TextInput({placeholder: "请输入用户名"}).fontSize(15).fontColor($r("app.color.text_h1")).type(InputType.Email).onChange((value) => {this.account = value})TextInput({placeholder: "请输入密码"}).margin({ top: 16 }).fontSize(15).fontColor($r("app.color.text_h1")).type(InputType.Password).onChange((value) => {this.password = value})Button("登录", {type: ButtonType.Capsule}).width('100%').margin({ top: 50 }).fontSize(15).fontColor($r("app.color.white")).backgroundColor($r("app.color.color_shubihong")).onClick((e) => {this.login();})}.width('100%').margin({ top: 120 }).padding({ left: 16, right: 16 })}.width('100%').height('100%')}}

重点是这句：
在这里插入图片描述