--- theme: condensed-night-purple --- 鸿蒙相关版本信息： 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` 被禁止使用了（这是影响最大的地方其他的改变也造成了一些影响但是我就不过多描写了），然后就导致报错严重！！ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28f1317e0feb49bfbf62b0ad07ad2758~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=875&h=289&s=64603&e=png&b=fdfdfd) 下面就开始进入主题： ### 首先在module.json5中配置基础网络权限 ```ts "requestPermissions": [ { "name": "ohos.permission.INTERNET", } ] ``` ### 定义base常量我这里base地址使用的wan安卓的api ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdd370389ee449f68117b29071408c75~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=878&h=164&s=32325&e=png&b=272727) ### 封装泛型工具类 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dd08b28bbf24cb8bc3a4b3717099da0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=554&h=292&s=29876&e=png&b=272727) 注意data，不能像之前那样 ```ts data: T = null ``` 会报错，而且必须都有初始值 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb4091de3b7340ae8cadd51748950124~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=866&h=131&s=21224&e=png&b=272727) ### 封装request ```ts async function requestSync(path: string, method: http.RequestMethod, extraData?: Object): Promise> { return new Promise>((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() 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??-1 res.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> { return requestSync("/user/login", http.RequestMethod.POST, `username=${username}&password=${password}`); } async logout(): Promise> { return requestSync("/user/logout/json", http.RequestMethod.GET); } async getUserInfo(): Promise> { 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请求自己添加。试一下：一个简单的登陆页： ```ts @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%') } } ``` 重点是这句： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42ed43ca14c74cda8a2ababf136773e9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=597&h=183&s=25791&e=png&b=262626) 请求结果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14e834c56afb43dfb08e6729287d2902~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1292&h=76&s=19903&e=png&b=272727) ### 总结以上网路请求的封装更多的是自己的使用习惯，也清楚有很多需要改进的空间，如果有大佬能更进一步当然更好。也参考了一些其他大佬的文章： [https://juejin.cn/post/7366192987551825970](https://juejin.cn/post/7366192987551825970?from=search-suggest) 欢迎大家指正与建议