HarmonyOS Next开发，使用Promise异步回调方式封装http请求

Olah_

已于 2024-07-11 12:47:59 修改

阅读量2.5k

点赞数 22

分类专栏： HarmonyOS Next开发文章标签：华为前端 http HarmonyOS Next ArkTS API12

于 2024-06-28 17:36:39 首次发布

本文链接：https://blog.csdn.net/gusha_/article/details/140033069

版权

HarmonyOS Next开发专栏收录该内容

12 篇文章 41 订阅

订阅专栏

3、创建request文件，封装http请求

3.1 编写request方法

3.2 返回Promise对象前，先获取一下关键参数

前言

本专栏记录鸿蒙应用开发的一些知识，供鸿蒙开发者学习。笔者目前还是个小菜鸡，鸿蒙开发也是我看相关资料自学的，所以本文有些地方可能考虑不够周到，有些纰漏，就当抛砖引玉，还望读者海涵。目前HarmonyOS Next已经发布，API已更新至12，只有鸿蒙的开发者越来越多，才能更好的去改进HarmonyOS，去做好我们国人自己的系统，防止被别人卡脖子。本专栏适合初学者做一个入门，同时默认读者具备一定前端基础。本专栏的内容可以做一些课设，毕设之类的。但对于企业中的真实需求，可能考虑不够周到。因为笔者目前还没有工作(T＿T）

本文主要讲解HarmonyOS Next开发http请求的封装。发送http请求需要申请ohos.permission.INTERNET权限。官方文档地址：http请求

版本说明：本文的API版本为12

一、业务场景

1、登录注册功能

在APP的登录注册功能中，我们往往需要访问后台数据库。用户登录时，输入账号和密码，点击登陆后，前端发起登录请求。后端接收到请求后，处理对应的逻辑，判断用户是否注册，密码是否正确等。

2、商品详情页功能

商品详情页功能，当我们点开某一个商品项的时候，前端将该商品的ID发送给后端，后端响应对应的商品详情信息给前端，前端再将数据进行一个渲染。

二、封装http请求

官方文档里的http开发指南比较全面，如果我们是做课设，或者是毕设，有些东西可以省去。下面我来讲解主要的步骤。

1、创建resultVO接口

前端发送请求后，后端返回的数据一般是如下格式：code--响应状态码；msg--响应信息；data--响应数据。响应数据data一般有多种类型，这里用泛型T接收，外部调用时，再指定T的类型。ArkTS是TypeScipt的超集，一般TS有的，ArkTS也有。所以ArkTS也支持泛型。

/*
  * resultVO接口
  * @code 响应码
  * @msg  响应信息
  * @data 响应数据
 */
export default interface resultVO<T>{
  code: number
  msg: string
  data: T
}

2、创建requestParams接口

此接口用于规范调用http请求时的参数。

import { http } from '@kit.NetworkKit'

/*
  * requestParams接口
  * @url          必填                     访问地址  (后端api访问地址)
  * @method       选填（默认get）           请求方法  (get、post...)
  * @extraData    选填（默认undefined ）    请求参数
 */
export interface requestParams{

  url: string
  method?: http.RequestMethod
  extraData?: object

}

3、创建request文件，封装http请求

3.1 编写request方法

request方法需传入请求参数（requestParams接口），并返回一个Promise对象，该对象里面是resultVO<T>类型的数据。

/*
  * request方法
  * @params requestParams接口类型
  * @@return Promise<resultVO<T>>
 */
export const request = async <T>(params: requestParams): Promise<resultVO<T>> => {
  
  /*
    * @resolve 请求成功
    * @reject  请求失败
   */
  return new Promise(async (resolve, reject) => {
    

  })

}

3.2 返回Promise对象前，先获取一下关键参数

如果是本地模拟器访问本地的SpringBoot服务器，基地址为你所使用的电脑，它的IPv4地址。移动端项目和Vue项目不同，Vue项目的基地址一般是127.0.0.1，这个需要注意。我们这里把基地址设置成一个常量。要修改是，去常量类里面修改，提高代码的维护性。

token可以使用首选项进行存储和调用。首选项的知识可以看我的另外一篇文章：封装用户首选项

请求头一般是json类型，如有其他需求，可以更改。这个一般是和后端协调决定。如果自己做课设或者毕设，这里传一个token进来就可以了。

  // 基地址。如果用本地模拟器访问，基地址一般为 “http://本机的IPv4地址:8080”
  const baseURL: string = CommonConstants.BASE_URL

  // 创建一个HttpRequest对象 -- 不可复用，一个httpRequest对象对应一个http请求
  let httpRequest = http.createHttp()

  // 获取token
  let token: preferences.ValueType = await PreferenceUtil.getPreferenceValue(
    CommonConstants.TOKEN, CommonConstants.NULL_TOKEN
  )

  // 完整请求地址
  let requestUrl = baseURL + params.url

  // 发起请求可选参数的类型和取值范围。
  let options: http.HttpRequestOptions = {

    // 请求类型，不传默认get
    method: params.method ?? http.RequestMethod.GET,

    // 请求头
    // 做课设、毕设之类的，'Content-Type'默认'application/json'就好
    // 请求头只用携带一个token，用于身份的校验
    header: {
      'Content-Type': 'application/json',
      token
    },

    // 请求参数，不传默认undefined
    extraData: params.extraData ?? undefined,

    // 必填，不知道是不是bug，不填object类型，就会拿不到后端数据，和官方文档不一样
    // 也可能是我后端接口的问题。----------这里存疑----------
    expectDataType: http.HttpDataType.OBJECT
  }