【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装

这篇具有很好参考价值的文章主要介绍了【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

现在网上的应用,基本都是网络应用,需要进行联网获取数据,而常用的联网获取数据的方式有http、socket、websocket等。

在鸿蒙应用、服务中,stage模式开发下,鸿蒙官方为我们提供了一个网络组件库 http ,我们通过

import http from ‘@ohos.net.http’; 即可以完成引用。

http网络库组件介绍

@ohos.net.http (数据请求)
该组件提供HTTP数据请求能力。应用可以通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
具体查看官网
通过官网的介绍,可以很快上手该组件的使用,下面我们对该网络库进行简单的封装,方便我们的使用

http网络库封装

网络库工程结构如下图:
【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装,Harmony,harmonyos,http,华为,ArkTS
具体步骤如下:

  1. 创建Har Module
  2. 创建RequestOption请求配置类
  3. 创建HttpCore核心类
  4. 创建HttpManager对外管理类
  5. 对外组件导出
  6. 添加网络权限

创建Har Module

我们创建一个Module ,类型选择为Har,3.1Beta IDE选择 Visual Library,这里我们创建module名称为

httpLibrary。

创建RequestOption 配置类

代码如下:

/**
 * <pre>
 * @desc  : 网络请求配置
 * </pre>
 */
export interface RequestOptions {

  /**
   * Request url.
   */
  url?: string;

  /**
   * Request method.
   */
  method?: RequestMethod; // default is GET

  /**
   * Request url queryParams  .
   */
  queryParams ?: Record<string, string>;

  /**
   * Additional data of the request.
   * extraData can be a string or an Object (API 6) or an ArrayBuffer(API 8).
   */
  extraData?: string | Object | ArrayBuffer;

  /**
   * HTTP request header.
   */
  header?: Object; // default is 'content-type': 'application/json'

}

export enum RequestMethod {
  OPTIONS = "OPTIONS",
  GET = "GET",
  HEAD = "HEAD",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE",
  TRACE = "TRACE",
  CONNECT = "CONNECT"
}

这里字段大家可自行拓展,我这里简单添加了几个常用字段,包括url、urlParams、header、extraData、大家也可以增加一些诸如UserAgent之类的网络配置。

创建HttpCore核心类

该类使我们这个网络库的主要核心代码实现,主要封装’@ohos.net.http的API调用,提供便捷使用的API。

import http from '@ohos.net.http';
import { RequestOptions } from './RequestOptions';

/**
 * Http请求器
 */
export class HttpCore {

  /**
   * 发送请求
   * @param requestOption
   * @returns Promise
   */
  request<T>(requestOption: RequestOptions): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      this.sendRequest(requestOption)
        .then((response) => {
          if (typeof response.result !== 'string') {
            reject(new Error('Invalid data type'));

          } else {
            let bean: T = JSON.parse(response.result);
            if (bean) {
              resolve(bean);
            } else {
              reject(new Error('Invalid data type,JSON to T failed'));
            }

          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  }


  private sendRequest(requestOption: RequestOptions): Promise<http.HttpResponse> {

    // 每一个httpRequest对应一个HTTP请求任务,不可复用
    let httpRequest = http.createHttp();

    let resolveFunction, rejectFunction;
    const resultPromise = new Promise<http.HttpResponse>((resolve, reject) => {
      resolveFunction = resolve;
      rejectFunction = reject;
    });

    if (!this.isValidUrl(requestOption.url)) {
      return Promise.reject(new Error('url格式不合法.'));
    }

    let promise = httpRequest.request(this.appendQueryParams(requestOption.url, requestOption.queryParams), {
      method: requestOption.method,
      header: requestOption.header,
      extraData: requestOption.extraData, // 当使用POST请求时此字段用于传递内容
      expectDataType: http.HttpDataType.STRING // 可选,指定返回数据的类型
    });

    promise.then((response) => {

      console.info('Result:' + response.result);
      console.info('code:' + response.responseCode);
      console.info('header:' + JSON.stringify(response.header));


      if (http.ResponseCode.OK !== response.responseCode) {
        throw new Error('http responseCode !=200');
      }
      resolveFunction(response);

    }).catch((err) => {
      rejectFunction(err);
    }).finally(() => {
      // 当该请求使用完毕时,调用destroy方法主动销毁。
      httpRequest.destroy();
    })
    return resultPromise;
  }


  private appendQueryParams(url: string, queryParams: Record<string, string>): string {

    // todo 使用将参数拼接到url上
    return url;
  }

  private isValidUrl(url: string): boolean {

    //todo 实现URL格式判断
    return true;

  }
}

export const httpCore = new HttpCore();

代码讲解:

  1. expectDataType: http.HttpDataType.STRING,这里固定了返回数据为string,大家也可以通过RequestOptions中定义字段传入,这里定义为string只是方便后续的string转Bean;
  2. 定义sendRequest方法。
  3. 对请求配置进行处理,这里进行对Url进行格式判断,如果非正确格式,需要对外抛出错误;需要进行Url参数拼接;可对请求参数、请求结果进行日志打印;对Http响应码进行判断,按200和非200请求码进行分类返回。
  4. 定义 request 进行请求结果转Bean的处理(这里默认返回数据为JSON 字符串,其他类型自行拓展),该方法也是对外的唯一函数。

创建HttpManager核心类

import { RequestOptions } from './RequestOptions';
import { httpCore as HttpCore } from './HttpCore';
/**
 * <pre>
 * @desc       : 对外管理器
 * </pre>
 */
export class HttpManager {
  private static mInstance: HttpManager;

  // 防止实例化
  private constructor() {
  }

  static getInstance(): HttpManager {
    if (!HttpManager.mInstance) {
      HttpManager.mInstance = new HttpManager();
    }
    return HttpManager.mInstance;
  }

  request<T>(option: RequestOptions): Promise<T> {
    return HttpCore.request(option);
  }
}

HttpManager 为对外API调用入口类,提供单例对象跟发送请求API。

对外组件导出

在httpLibrary模块的根目录下有一个 index.ets文件,在该文件中进行需要对外导出的组件定义


export { HttpManager } from './src/main/ets/http/HttpManager';
export { RequestMethod } from './src/main/ets/http/RequestOptions';

到这里我们就完成了一个简易的网络库封装,我们可以将该module导出Har包对外提供,也可以直接在项目中使用该module。

添加网络权限

漏了一点,这里记得为该网络库添加上网络权限哦,在module.json5文件中

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

http网络库依赖和使用

依赖http网络库(httpLibrary)

打开entry下的 oh-package.json5文件,增加如下依赖:

"dependencies": {
    '@ohos/http_library': 'file:../httpLibrary'
  }

使用http网络库(httpLibrary)

这里我们写一个例子,使用该网络库进行发送一个get请求

【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装,Harmony,harmonyos,http,华为,ArkTS
在entry下,任意页面中,进行请求调用。

handleClick() {
    HttpManager.getInstance()
      .request<TestBean>({
        method: RequestMethod.GET,
        url: 'https://jsonplaceholder.typicode.com/todos/1' //公开的API
      })
      .then((result) => {
        console.info(JSON.stringify(result));
      })
      .catch((err) => {
        console.error(JSON.stringify(err));
      });
  }

https://jsonplaceholder.typicode.com/todos/1 是一个公开的get请求API(如果侵权,请联系我删除,谢谢!)
这里我们定一个了一个TestBean,进行数据解析

/**
 * <pre>
 * @desc       : 测试Bean
 * </pre>
 */
export interface TestBean {

  /**
   * {
   "userId": 1,
   "id": 1,
   "title": "delectus aut autem",
   "completed": false
   }
   */

  userId: number,
  id: number,
  title: string,
  completed: boolean

}

这样就完成了调用,接着我们将应用装机,点击获取数据按钮,可以在log面板看到如下输出:

【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装,Harmony,harmonyos,http,华为,ArkTS
文章到此结束,需要Demo的或者是有问题交流的,欢迎评论区留言。文章来源地址https://www.toymoban.com/news/detail-612312.html

到了这里,关于【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS鸿蒙ArkTS,封装http网络请求

    要想使用http请求,系统必须要具备ohos.permission.INTERNET权限,在model.json5文件中的module模块下添加如下请求权限: 在module.json5文件中 配置 在文件中定义,文件目录自定义 至此整个请求封装结束

    2024年02月20日
    浏览(47)
  • 鸿蒙ArkTS实现http,axios网络请求

    实现http请求,在ArkTS中我们可以直接使用http如下代码 实现axios我们需要使用一个第三方工具 下载ohpm工具包,点击链接获取。 2. 解压文件,进入“ohpm/bin”目录,打开命令行工具,执行如下指令初始化ohpm Windows环境下执行: init.bat  如果init.bat不可以使用./init.bat 3. 将ohpm配置

    2024年04月12日
    浏览(34)
  • 鸿蒙实战:ArkTs 开发一个鸿蒙应用

    学习过的 ArkTs 知识点,一步一步开发一个小的鸿蒙应用示例,涉及到  ArkTs 语法、注解 @Entry 、 @Component 、 @state 、路由、生命周期、 @Prop 、 @Link 、常用组件的使用等等知识点。 要开发一个鸿蒙应用,首先我们需要知道 系统是如何找到页面的启动入口 。 鸿蒙如何启动应用

    2024年02月22日
    浏览(40)
  • 鸿蒙开发系列教程(七)--ArkTS语言:状态管理

    如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念 状态管理机制:在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化

    2024年01月20日
    浏览(40)
  • HarmonyOS鸿蒙应用开发——HTTP网络访问与封装

    网络基础-TCPIP协议分层模型 TCP协议-三次握手与四次挥手 UDP协议-简单高效的传输协议 HTTP协议-应用间的通信协议 鸿蒙应用发起HTTP请求的基本使用,如下: 导入http模块 创建httpRequest对象 发起http请求,并处理响应结果 第一、导入http模块: 第二、创建httpRequest对象, 注意的是

    2024年02月04日
    浏览(39)
  • 用Rust开发鸿蒙应用(ArkTS NAPI)

    在DevEco Studio的模板工程中包含使用Native API的默认工程,使用File-New-Create Project创建Native C++模板工程。 在此基础上进行修改 删除 entry/src/main/cpp 打开 entry/build-profile.json5 删除c++ build 配置 创建rust项目 修改 Cargo.toml lib.rs 添加测试代码 添加对应ts代码 配置依赖 在 rust 根目录下编

    2024年02月03日
    浏览(35)
  • 鸿蒙Harmony应用开发—ArkTS(stateStyles:多态样式)

    @Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式。这就是我们本章要介绍的内容stateStyles(又称为:多态样式)。 stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下五种

    2024年04月15日
    浏览(41)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:CalendarPicker)

    日历选择器组件,提供下拉日历弹窗,可以让用户选择日期。 说明: 该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 无 CalendarPicker(options?: CalendarOptions) 日历选择器。 系统能力:  SystemCapability.ArkUI.ArkUI.Full 参数: 参数名

    2024年03月09日
    浏览(31)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:尺寸设置)

    用于设置组件的宽高、边距。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 width(value: Length) 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。 从API ver

    2024年03月15日
    浏览(71)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:ImageAnimator)

    提供帧动画组件来实现逐帧播放图片的能力,可以配置需要播放的图片列表,每张图片可以配置时长。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 无 ImageAnimator() 从API version 10开始,该接口支持在ArkTS卡片中使用。

    2024年03月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包