HarmonyOS中的http请求及其封装(附案例)

这篇具有很好参考价值的文章主要介绍了HarmonyOS中的http请求及其封装(附案例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概述

HarmonyOS提供了@ohos.net.http模块,它提供了Http数据请求能力。当在应用开发中需要使用http获取服务端数据时可以导入该模块实现http请求的发送。

@ohos.net.http模块提供http数据请求能力。应用可以通过http发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

如何使用?

要想使用http请求,系统必须要具备ohos.permission.INTERNET权限,在model.json5文件中的module模块下添加如下请求权限:

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

完整示例

该例引用自鸿蒙开发文档@ohos.net.http (数据请求)

// 引入包名
import http from '@ohos.net.http';

// 每一个httpRequest对应一个HTTP请求任务,不可复用
let httpRequest = http.createHttp();
// 用于订阅HTTP响应头,此接口会比request请求先返回。可以根据业务需要订阅此消息
// 从API 8开始,使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
httpRequest.on('headersReceive', (header) => {
    console.info('header: ' + JSON.stringify(header));
});
httpRequest.request(
    // 填写HTTP请求的URL地址,可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "EXAMPLE_URL",
    {
        method: http.RequestMethod.POST, // 可选,默认为http.RequestMethod.GET
        // 开发者根据自身业务需要添加header字段
        header: {
            'Content-Type': 'application/json'
        },
        // 当使用POST请求时此字段用于传递内容
        extraData: {
            "data": "data to send",
        },
        expectDataType: http.HttpDataType.STRING, // 可选,指定返回数据的类型
        usingCache: true, // 可选,默认为true
        priority: 1, // 可选,默认为1
        connectTimeout: 60000, // 可选,默认为60000ms
        readTimeout: 60000, // 可选,默认为60000ms
        usingProtocol: http.HttpProtocol.HTTP1_1, // 可选,协议类型默认值由系统自动指定
    }, (err, data) => {
        if (!err) {
            // data.result为HTTP响应内容,可根据业务需要进行解析
            console.info('Result:' + JSON.stringify(data.result));
            console.info('code:' + JSON.stringify(data.responseCode));
            // data.header为HTTP响应头,可根据业务需要进行解析
            console.info('header:' + JSON.stringify(data.header));
            console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时,调用destroy方法主动销毁
            httpRequest.destroy();
        } else {
            console.info('error:' + JSON.stringify(err));
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时,调用destroy方法主动销毁。
            httpRequest.destroy();
        }
    }
);

http.createHttp

这是源码中对createHttp的方法的封装,它的返回值是一个HttpRequest对象。

/**
 * Creates an HTTP request task.
 * 创建一个HTTP请求任务,返回值为HttpRequest对象
 */
function createHttp(): HttpRequest;

HttpRequest接口文件中封装了request、destory、on、off、once方法,见以下源码注释:

详细解析参考HarmonyOS开发文档

export interface HttpRequest {
    /**
     * Initiates an HTTP request to a given URL.
     * 向给定的URL地址发送一个HTTP请求
     */
    request(url: string, callback: AsyncCallback<HttpResponse>): void;
    request(url: string, options: HttpRequestOptions, callback: AsyncCallback<HttpResponse>): void;
    request(url: string, options?: HttpRequestOptions): Promise<HttpResponse>;
    /**
     * Destroys an HTTP request.
     * 销毁一个HTTP请求
     */
    destroy(): void;
    /**
     * Registers an observer for HTTP Response Header events.
     * 订阅HTTP响应头事件
     * @deprecated since 8
     * @useinstead on_headersReceive
     */
    on(type: "headerReceive", callback: AsyncCallback<Object>): void;
    /**
     * Unregisters the observer for HTTP Response Header events.
     * 取消订阅HTTP响应头事件
     * @deprecated since 8
     * @useinstead off_headersReceive
     */
    off(type: "headerReceive", callback?: AsyncCallback<Object>): void;
    /**
     * Registers an observer for HTTP Response Header events.
     * 订阅HTTP响应头事件
     * @since 8
     */
    on(type: "headersReceive", callback: Callback<Object>): void;
    /**
     * Unregisters the observer for HTTP Response Header events.
     * 取消订阅HTTP响应头事件
     * @since 8
     */
    off(type: "headersReceive", callback?: Callback<Object>): void;
    /**
     * Registers a one-time observer for HTTP Response Header events.
     * 订阅一次HTTP响应头事件
     * @since 8
     */
    once(type: "headersReceive", callback: Callback<Object>): void;
}

 HttpRequestOptions

发送http请求携带的参数。

参数详情及取值范围

名称 类型 必选项 说明
method RequestMethod(枚举)

请求方式

extraData string | Object | ArrayBuffer(API8以后) 发送请求的额外数据,用于http请求的POST、PUT方法
expectDataType HttpDataType(枚举) 指定返回数据的类型,如果指定了,将优先返回指定的类型
useingCache(API9之后) boolean 是否使用缓存,默认为true
priority(API9后) number 优先级,取值为[1,1000],默认为1
header Object http请求头字段,默认为{‘Content-Type’:'application/json'}
redTimeout number 读取超时时间,单位ms,设置为0时表示不会出现超时情况
connectTimeout number 连接超时时间,单位ms
usingProtocol(API9之后) HttpProtocol(枚举) 使用的http协议,默认值由系统指定

RequestMethod

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

 HttpDataType

/**
 * Indicates the type of the returned data.
 * 指定返回数据的类型
 * @since 9
 */
export enum HttpDataType {
    STRING,
    OBJECT = 1,
    ARRAY_BUFFER = 2
}

HttpProtocol

/**
 * Supported protocols.
 * 支持的协议
 * @since 9
 */
export enum HttpProtocol {
    HTTP1_1,
    HTTP2
}

HttpResponse 

request方法回调函数的返回值类型。

名称 类型 说明
result string | Object | ArrayBuffer(API6之后) HTTP请求根据响应头中Content-type类型返回对应的响应格式内容
resultType(API 9之后) HttpDataType(枚举) 返回值类型
responseCode ResponseCode | number 回调函数执行成功时,此字段为ResponseCode。若执行失败,错误码会从AsyncCallback中的err字段返回
header Object http请求返回的响应头

 封装http请求及案例

封装Response

按照后端返回的数据格式封装Response

export default class Response{
  /**
   * 响应码
   */
  code: number
  /**
   * 相应消息
   */
  msg: string
  /**
   * 相应数据
   */
  data: any
}

封装http请求

封装http请求方法,并且处理返回值。将http请求函数作为可导出模块,之后在其他模块中引用即可使用http请求,同Axios。

注意:如果使用本地模拟器,使用"http://locaohost:端口号"不能完成请求,需要将localhost更换为本机的ip地址

http请求封装引自鸿蒙 HarmonyOS4.0 Http数据请求封装详解-CSDN博客https://blog.csdn.net/qq_68512683/article/details/134724984

import http from '@ohos.net.http';
import Response from './Response';

//导出httpRequest请求函数
export function request(url: string, method: http.RequestMethod, requestData?: any): Promise<Response>{
  //如果使用本地模拟器,则ip为本机的IP地址
  const BASE_URL: string = "http://ip:服务端端口号"
  let httpRequest = http.createHttp()
  let responseResult = httpRequest.request(
    BASE_URL + url,
    {
      method: method,
      header: {
        'Content-Type': 'application/json'
      },
      //携带额外参数
      extraData: JSON.stringify(requestData),
      //可选,默认为60000ms
      connectTimeout: 60000,
      readTimeout: 60000,
    }
  )
  let response = new Response();
  //处理数据,并返回
  return responseResult.then((value: http.HttpResponse) => {
    if (value.responseCode === 200) {
      //获取返回数据,将返回的json数据解析成事先预定好的响应格式
      //这里建议和后端的保持一致
      let res: Response = JSON.parse(`${value.result}`);
      response.data = res.data;
      response.code = res.code;
      response.msg = res.msg;
     }else {
       response.msg = '请求错误';
       response.code = 400;
     }
     return response;
  }).catch(() => {
    response.msg = '请求错误';
    response.code = 400;
    return response;
  });
}

案例

后端接口请自行设计。

登录页面

import router from '@ohos.router'
import { User } from '../entity/User'
import { login } from './httpRequest/UserRelated'
/**
 * 登录页面
 */
@Entry
@Component
struct Login{

  @State user: User = new User('','')

  build(){
    Column({space: 10}){
      Row(){
        Text('+86')
        TextInput({placeholder: '请输入手机号'})
          .type(InputType.PhoneNumber)
          .height(45)
          .backgroundColor('#ffffff')
          .padding(10)
          .layoutWeight(1)
          .onChange(value =>{
            this.user.phone = value
          })
      }.padding({left: 20, right: 20})
      Row(){
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Number)
          .height(45)
          .backgroundColor('#ffffff')
          .padding({left: 0, right: 0})
          .layoutWeight(1)
          .onChange(value =>{
            this.user.password = value
          })
      }.padding({left: 20, right: 20})
      Row(){
        Button('登 录')
          .type(ButtonType.Normal)
          .fontSize(20)
          .width('100%')
          .borderRadius(20)
          .backgroundColor('#2f90b9')
          .fontColor('#ffffff')
          .onClick(() => {
            login(this.user).then(res =>{
              if (res.code === 1) {
                router.pushUrl({
                  url: 'pages/Index'
                })
              } else {
                AlertDialog.show({
                  title: '警告',
                  message: res.msg
                })
              }
            })
          })
      }.padding({left: 20, right: 20})

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

用户相关http请求

将http请求从页面中抽离出来封装在一个ets文件中,在页面中直接引用方法即可。不混杂在页面代码中,增强代码可读性。

import http from '@ohos.net.http'
import { User } from '../../entity/User'
import { request } from '../../utils/httpUtils/Request'
/**
 * 用户相关数据请求
 * @returns
 */
export function login(user: User){
  return request('/user/user/login', http.RequestMethod.POST, user)
}

用户对象

不在页面中定义,页面只进行数据项的定义和数据渲染即可,增强代码可读性。文章来源地址https://www.toymoban.com/news/detail-762652.html

export class User{
  phone: String
  password: String

  constructor(phone: String, password: String) {
    this.phone = phone
    this.password = password
  }
}

到了这里,关于HarmonyOS中的http请求及其封装(附案例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • HarmonyOS鸿蒙应用开发——HTTP网络访问与封装

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

    2024年02月04日
    浏览(50)
  • 鸿蒙HarmonyOS-HTTP网络数据请求

    应用可以通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 亲爱的读者: 首先,我要感谢您抽出宝贵的时间阅读这篇文章。我深知,您的每一分每一秒都是宝贵的。为此,我在创作这篇文章时付出了巨大的努力,力求为您提供最具价

    2024年01月16日
    浏览(71)
  • nuxt3 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回

    项目中封装接口请求,并且解决刷新页面useFetch无返回数据问题 刷新页面useFetch无返回数据问题: 浏览器刷新的时候页面没有显示数据,接口data无返回。本身nuxt的useFetch在参数不变的情况下,数据是不会重新从后台接口去请求数据的,会直接拿上一次的结果。但是有实时去后

    2024年02月11日
    浏览(76)
  • 鸿蒙HarmonyOS实战-工具安装和Helloworld案例

    HarmonyOS是华为自主开发的操作系统,它在2020年9月正式发布。它最初被称为鸿蒙OS,后来更名为HarmonyOS。HarmonyOS旨在提供一种可在各种设备上无缝运行的统一操作系统,包括智能手机、平板电脑、智能穿戴设备、智能音箱、车载系统、智能家居设备等等。相比于其他操作系统,

    2024年01月17日
    浏览(40)
  • IDEA中的轻量级接口请求工具 | HTTP Client 新手指南

    新钛云服已累计为您分享 706 篇技术干货 一、 简介 HTTP Client 是 IDEA 自带的一款简洁轻量级的接口调用插件,通过它,我们能在 IDEA 上开发,调试,测试 RESTful Web 服务。 二、 快速上手 1、 首先要确保 HTTP Client 插件是安装启动的,默认是已安装启动的。若没有安装,在 File

    2024年02月03日
    浏览(50)
  • 详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第三节 (封装TabBar JS版)

    本组件通过HML布局、CSS样式和JS逻辑封装实现一个通用的Tabbar。支持可配置的Tab项和对应页面,可以方便接入到不同页面中,提高开发效率。 HML部分采用Flex布局实现Tabbar的整体结构,包含多个Tab项。 CSS部分定义样式,包括图标大小、文字颜色等样式参数。支持后续扩展。 JS部分提

    2024年02月04日
    浏览(53)
  • HarmonyOS基础(七)- 详细剖析鸿蒙引入第三方库案例篇(1)

    大家好!我是黑臂麒麟(起名原因:一个出生全右臂自带纹身的高质量程序员😏),也是一位6+(约2个半坤年)的前端; 学习如像练武功一样,理论和实践要相结合,学一门只是也是一样; 这里会用两周的时间把所学的常用ArkUI基础的常用组件输出在网; 如需深究可前往高

    2024年04月23日
    浏览(31)
  • 【HarmonyOS开发】ArkTs使用Http封装

    @ohos/axios @ohos/retrofit @ohos/httpclient @ohos.net.http 本模块提供HTTP数据请求能力。应用可以通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 http.createHttp(创建请求实例任务); request(请求); destroy(中断请求); on(订阅HTTP Response H

    2024年01月22日
    浏览(46)
  • HarmonyOS Next 自定义安全键盘案例_鸿蒙next 自定义键盘(1)

    // 切换大写字母键盘 this.curKeyboardType = EKeyboardType.UPPERCASE; this.items = upperCaseKeyData; } else { // 切换小写字母键盘 this.curKeyboardType = EKeyboardType.LOWERCASE; this.items = lowerCaseKeyData; } break; // 切换特殊字符键盘 case EKeyType.SPECIAL: if (this.curKeyboardType !== EKeyboardType.SPECIAL) { this.curKeyboardType =

    2024年04月17日
    浏览(58)
  • HarmonyOS 发送http网络请求

    好 本文 我们来说 http请求 首先 我们要操作网络内容 需要申请权限 项目中找到 main目录下的module.json5 最下面加上 这里 我在本地写了一个get接口 大家可以想办法 弄一个后端接口 首先 我们编写一个组件雏形 我们导入 @ohos.net.http 然后 通过 createHttp 获取一个http对象 然后通过对

    2024年01月23日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包