目录

鸿蒙实战开发教程HarmonyOS-next开发网络请求封装Api11Release

【鸿蒙实战开发教程】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 被禁止使用了(这是影响最大的地方其他的改变也造成了一些影响但是我就不过多描写了),然后就导致报错严重!!

https://i-blog.csdnimg.cn/blog_migrate/bb8ad552a2a3f4662f9366dd2c0069fa.png

下面就开始进入主题:

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

我这里base地址使用的wan安卓的api

https://i-blog.csdnimg.cn/blog_migrate/96911a204f347c951a1a7de5fc58b0fa.png

https://i-blog.csdnimg.cn/blog_migrate/71e689ef6204ad266bafde3ca04531cb.png

注意data,不能像之前那样

data: T = null

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

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??-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<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%')

}

}

重点是这句:

https://i-blog.csdnimg.cn/blog_migrate/371c9cd82459d7e01b66d2d3116fe56b.png

请求结果:

https://i-blog.csdnimg.cn/blog_migrate/e88041f9e6e90809df070f7e6a83c351.png

总结

以上网路请求的封装更多的是自己的使用习惯,也清楚有很多需要改进的空间,如果有大佬能更进一步当然更好。

有很多小伙伴不知道该从哪里开始学习 鸿蒙开发技术 ?也不知道鸿蒙开发的知识点重点掌握的又有哪些?自学时频繁踩坑,导致浪费大量时间。结果还是一知半解。所以有一份实用的 鸿蒙(HarmonyOS NEXT)全栈开发 资料用来跟着学习是非常有必要的。

这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了

https://i-blog.csdnimg.cn/blog_migrate/ed3559d0a0691fd5b0d99b61925662ec.png

https://i-blog.csdnimg.cn/blog_migrate/bcc554f139655cfcf0aabbbadbc5434b.png

https://i-blog.csdnimg.cn/blog_migrate/ba61aec3b1a39b8992f4a275dbeb89de.png

https://i-blog.csdnimg.cn/blog_migrate/ca9281160eb6ae4701956c74a84f86ba.png

https://i-blog.csdnimg.cn/blog_migrate/1e46779ff3f754532c4dcc962b4f0538.png