HarmonyOS NEXT应用开发实战(一、打造最好用的网络通信模块组件)

随着HarmonyOS NEXT 的发布，越来越多的开发者开始关注如何在这个新平台上高效地进行应用开发。其中网络通信模块的封装尤为关键。纵观HarmonyOS的众多三方网络库及封装，竟没有一个简单好用的。虽然有个axios的鸿蒙版，但有点儿重了也不是很好用。本篇博文将介绍如何将uniapp中的luch-request网络库移植到HarmonyOS中，从而实现更简单、高效的HTTP网络通信。

为什么选择luch-request？

在HarmonyOS中，原始的ohos.net.http接口虽然功能强大，但在实际使用中却存在一些复杂性和局限性。这使得开发者在进行网络请求时需要写更多的代码，而且处理错误、配置请求等操作也较为繁琐。而uniapp中的luch-request，使用起来特别的简单好用，且比axios更简单和轻量级，功能一点也不弱。

相较而言，luch-request网络库的优点：

  1. 简洁易用：提供了易于理解的API接口，开发者可以通过简单的调用来实现复杂的网络请求。
  2. Promise支持：内置了Promise支持，方便与异步编程结合，提升代码的可读性和维护性。
  3. 请求拦截器和响应拦截器：可以方便地添加请求和响应的拦截器，用于统一处理请求头、参数和错误处理。
  4. 自动化的JSON数据解析：返回的数据会自动解析成JSON格式，省去了手动解析的步骤。
  5. 支持多种请求方式：GET、POST、PUT、DELETE等多种请求方式都能轻松实现。

luch-request网络库地址：GitHub - lei-mu/luch-request: luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。

官网介绍： 

luch-request

移植步骤

下面，我们将详细介绍如何将unIapp平台下的luch-request网络库移植到HarmonyOS中。

步骤一：准备环境

首先，你需要在HarmonyOS项目中引入luch-request库。我已经移植好了，发布在了Openharmony的三方库中。

移植后的gitee地址：yyz116/h_request

发布到三库库的地址：OpenHarmony三方库中心仓 

注：当前该三方库1.0.1版本正在审核中。可以从gitee项目中下载源码体验，内涵单元测试及demo。

可以这样引入使用：

ohpm  install @yyz116/h_request

import Request, { HttpRequestConfig, HttpResponse } from '@yyz116/h_request'

步骤二：封装请求模块

在你的HarmonyOS项目中创建一个新的网络请求模块，例如request.js，并在其中引入luch-request库。你需要对库进行小幅修改，以确保其与HarmonyOS环境兼容。

import Request, { HttpRequestConfig, HttpResponse } from '@yyz116/h_request'

const httpRequest = new Request();

httpRequest.setConfig((config) => {
    // Set base config
    config.baseURL = "https://your.api.url"; // 替换为你的API地址
    return config;
});

httpRequest.interceptors.request.use((config) => {
    // 可以在这里添加请求拦截器
    return config;
}, (error) => {
    return Promise.reject(error);
});

httpRequest.interceptors.response.use((response) => {
    // 可以在这里添加响应拦截器
    return response.data;
}, (error) => {
    return Promise.reject(error);
});

export default httpRequest;

步骤三：使用网络请求模块

在你的应用中，你可以通过引入request.js来进行网络请求。

import httpRequest from './request';

// 示例 GET 请求
httpRequest.get('/endpoint')
    .then(data => {
        console.log("获取数据成功:", data);
    })
    .catch(error => {
        console.error("请求失败:", error);
    });

// 示例 POST 请求
httpRequest.post('/endpoint', { key: 'value' })
    .then(data => {
        console.log("数据提交成功:", data);
    })
    .catch(error => {
        console.error("请求失败:", error);
    });

使用举例

// 发送post请求
http.post('api/v1/soonmovie', {start:0,count:1}).then((res:HttpResponse<Result>) => {
              hilog.debug(0x0000,"request",res.data.message)
              hilog.debug(0x0000,"request","res.data.code:%{public}d",res.data.code)
            }).catch((err:HttpResponse<Error>) => {
              hilog.debug(0x0000,"request","err.data.code:%d",err.data.code)
              hilog.debug(0x0000,"request",err.data.message)
            });

// 发送get请求，带参数
http.get('api/v1/musicsearchlrc', {params:{id:"543656129",kind:"wy"}}).then((res:HttpResponse<Result>) => {
              hilog.debug(0x0000,"request",res.data.message)
              hilog.debug(0x0000,"request","res.data.code:%{public}d",res.data.code)
            }).catch((err:HttpResponse<Error>) => {
              hilog.debug(0x0000,"request","err.data.code:%d",err.data.code)
              hilog.debug(0x0000,"request",err.data.message)
            });
          })

可以看到，接口使用变得如此简单。 且可以增加拦截器（建议把拦截器封装到单独的一个模块文件里，以下示例仅为示例utils/request.js）：

 export const setRequestConfig = () => {

            http.setConfig((config:HttpRequestConfig) => {
              config.baseURL = "http://175.178.126.10:8000/";
              return config;
            });
            // 请求拦截
            http.interceptors.request.use(
              (config) => {
                hilog.debug(0x0000,"request",'请求拦截')
                return config
              },
              (error) => {
                return Promise.reject(error)
              }
            )
            // 响应拦截
            http.interceptors.response.use(
              (response:HttpResponse) => {
                hilog.debug(0x0000,"request",'响应拦截')
                if (response.data.code == 401) {
                  // 提示重新登录
                  console.log('请登录')
                  setTimeout(() => {
                    console.log('请请登录')
                  }, 1000);
                }
                return response
              },
              (error) => {
                return Promise.reject(error)
              }
            )

}

接口使用变得清晰明了，如下api封装模块user.js： 

import { setRequestConfig } from '@/utils/request.js';

// 调用setRequestConfig函数进行请求配置
setRequestConfig();
const http = uni.$u.http
// 发起登录请求
export const requestLogin = (data) => http.post('/wx-api/login', data);
//请求验证码  /wx-api/validcode   get   参数:{"phone":"xxx"}
export const  requestVerificationCode = (params = {}) => http.get(`/wx-api/validcode`, params)
//发起注册请求   /wx-api/register   post   
/*
参数：{"code": "xxx","phone": "xxx","verifyCode": "xxx","nickname": "xxx","avatarUrl": "xxx","gender":"0"}
*/
export const requestRegister = (data)=>http.post('/wx-api/register',data)
//获取个人中心信息   /wx-api/me/info   get
export const requestUserInfo = () => http.get('/wx-api/me/info')
//修改个人昵称  /wx-api/update/nickname post  参数：newNickname
export const requestNickname = (data)=>http.post('/wx-api/update/nickname',data)

完整示例

import Request, { HttpRequestConfig, HttpResponse } from '@yyz116/h_request'
import { hilog } from '@kit.PerformanceAnalysisKit';

interface Movie{
  id:string;
  cover:string;
  title:string;
  gener:string;
  rate:number;
}
interface Result{
  code:number;
  message:string;
  data:Array<Movie>;
  count:number;
  start:number;
  total:number;
  title:string;

}
interface Error{
  code:number;
  message:string;
  data:Array<Movie>;
  count:number;
  start:number;
  total:number;
  title:string;
}


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('test1').width(300).margin({ top: 20 })
          .onClick(() => {
            // 需要执行的操作
            const http = new Request();
            http.setConfig((config:HttpRequestConfig) => {
              config.baseURL = "http://175.178.126.10:8000/";
              return config;
            });
            // 请求拦截
            http.interceptors.request.use(
              (config) => {
                hilog.debug(0x0000,"request",'请求拦截')
                return config
              },
              (error) => {
                return Promise.reject(error)
              }
            )
            // 响应拦截
            http.interceptors.response.use(
              (response:HttpResponse) => {
                hilog.debug(0x0000,"request",'响应拦截')
                if (response.data.code == 401) {
                  // 提示重新登录
                  console.log('请登录')
                  setTimeout(() => {
                    console.log('请请登录')
                  }, 1000);
                }
                return response
              },
              (error) => {
                return Promise.reject(error)
              }
            )

            http.post('api/v1/soonmovie', {start:0,count:1}).then((res:HttpResponse<Result>) => {
              hilog.debug(0x0000,"request",res.data.message)
              hilog.debug(0x0000,"request","res.data.code:%{public}d",res.data.code)
            }).catch((err:HttpResponse<Error>) => {
              hilog.debug(0x0000,"request","err.data.code:%d",err.data.code)
              hilog.debug(0x0000,"request",err.data.message)
            });

            http.get('api/v1/musicsearchlrc', {params:{id:"543656129",kind:"wy"}}).then((res:HttpResponse<Result>) => {
              hilog.debug(0x0000,"request",res.data.message)
              hilog.debug(0x0000,"request","res.data.code:%{public}d",res.data.code)
            }).catch((err:HttpResponse<Error>) => {
              hilog.debug(0x0000,"request","err.data.code:%d",err.data.code)
              hilog.debug(0x0000,"request",err.data.message)
            });
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

总结

通过将luch-request网络库移植到HarmonyOS，我们大大简化了网络请求的过程。开发者可以享受到更加清晰、简洁的API，同时也提升了开发效率。如果你正在开发HarmonyOS应用，不妨尝试一下这个网络通信模块封装，让你的开发过程更加顺畅。希望本文对你有所帮助，欢迎交流与分享经验！

写在最后

最后，推荐下笔者的业余开源app影视项目“爱影家”，推荐分享给与我一样喜欢观影的朋友。

开源地址:爱影家app开源项目介绍及源码

https://gitee.com/yyz116/imovie

其他资源

luch-request

yyz116/h_request

OpenAtom OpenHarmony

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/889794.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

保姆级教程 | VMD输出局部结构及利用TkConsole实现旋转

保姆级教程 | VMD输出局部结构及利用TkConsole实现旋转

背景 由于课题需要，现需要展示lammps模拟轨迹中的局部结构（主要是想可视化这里的结果：保姆级教程 | 输出分子动力学轨迹文件输出特定原子范围内的化学环境），因为ovito效果有点笨笨的，所以我这里选用VMD软件为例进行操作，效果图（超级好看夸夸）： （说明：主要的分子构…
阅读更多...
2024最新分别用sklearn和NumPy设计k-近邻法对鸢尾花数据集进行分类（包含详细注解与可视化结果）

2024最新分别用sklearn和NumPy设计k-近邻法对鸢尾花数据集进行分类（包含详细注解与可视化结果）

本文章代码实现以下功能&#xff1a; 利用sklearn设计实现k-近邻法。 利用NumPy设计实现k-近邻法。 将设计的k-近邻法对鸢尾花数据集进行分类&#xff0c;通过准确率来验证所设计算法的正确性&#xff0c;并将分类结果可视化。 评估k取不同值时算法的精度&#xff0c;并通过…
阅读更多...
HarmonyOS第一课 04 应用程序框架基础-习题分析

HarmonyOS第一课 04 应用程序框架基础-习题分析

判断题 1.在基于Stage模型开发的应用项目中都存在一个app.json5配置文件、以及一个或多个module.json5配置文件。T 正确(True) 错误(False) 这个答案是T - AppScope > app.json5&#xff1a;app.json5配置文件&#xff0c;用于声明应用的全局配置信息&#xff0c;比如应用…
阅读更多...
【红外传感器】STM32C8T6标准库使用红外对管

【红外传感器】STM32C8T6标准库使用红外对管

好好学习&#xff0c;天天向上 前言一、了解红外二、标准库的代码1.infrared.c2.infrared.h3.main.c4 现象 总结 前言 红外线&#xff1a;频率介于微波与可见光之间的电磁波。 参考如下 【STM32】标准库与HAL库对照学习教程外设篇–红外避障传感器 光电红外传感器详解&#…
阅读更多...
SpringCloud Alibaba-01 入门简介

SpringCloud Alibaba-01 入门简介

1.Spring Cloud Alibaba 是由阿里巴巴结合自身丰富的微服务实践而推出的微服务开发的一站式解决方案。它是 Spring Cloud 生态中的第二代实现&#xff0c;提供了包括服务注册与发现、分布式配置管理、服务限流降级、消息驱动能力、阿里云对象存储、分布式任务调度等在内的多种功…
阅读更多...
C语言-数据结构 折半查找

C语言-数据结构 折半查找

在折半查找中&#xff0c;刚开始学可能会在下标处产生困惑&#xff0c;例如奇数个长度的数组怎么处理&#xff0c;偶数个长度的数组怎么处理&#xff0c;不需要修改代码吗&#xff1f;并且下标我从1开始算和0开始算影响代码吗&#xff1f;其实都可以用一样的代码&#xff0c;产…
阅读更多...
Java项目-----图形验证码登陆实现

Java项目-----图形验证码登陆实现

原理: 验证码在前端显示,但是是在后端生成, 将生成的验证码存入redis,待登录时,前端提交验证码,与后端生成的验证码比较. 详细解释: 图形验证码的原理(如下图代码).前端发起获取验证码的请求后, 1 后端接收请求,生成一个键key(随机的键) 然后生成一个验证码作为map的valu…
阅读更多...
蒙特卡罗方法 - 不同的峰值之间的混合挑战篇

蒙特卡罗方法 - 不同的峰值之间的混合挑战篇

序言 蒙特卡罗方法&#xff0c;也称为统计模拟法或统计试验法&#xff0c;是一种以概率统计理论为基础的数值模拟方法。自 20 20 20世纪 40 40 40年代中期提出以来&#xff0c;它因能灵活处理复杂计算问题而广泛应用于多个领域&#xff0c;如金融工程学、宏观经济学和计算物理…
阅读更多...
Transformer 模型和 BERT 模型：概述

Transformer 模型和 BERT 模型：概述

语言模型发展历程Language modeling history 多年来&#xff0c;语言建模一直在不断发展。过去十年的最新突破&#xff0c;包括使用神经网络来表示文本&#xff0c;比如2013年的Word2vec和N元语法&#xff0c;2014年开发的序列到序列模型&#xff0c;如RNN和LSTM帮助提高机器学…
阅读更多...
(C语言贪吃蛇)16.贪吃蛇食物位置随机(完结撒花)

(C语言贪吃蛇)16.贪吃蛇食物位置随机(完结撒花)

目录 前言 修改方向 修改内容 效果展示 两个新的问题&#x1f64b; 1.问题1 2.问题2 代码如下&#xff1a; 前言 我们上一节实现了贪吃蛇吃食物身体节点变长&#xff0c;但是食物的刷新位置不是随机的&#xff0c;并且初始化几次后食物就刷不见了&#xff0c;本节我们就来…
阅读更多...
[AWS云]kafka调用和创建

[AWS云]kafka调用和创建

背景:因为因为公司的项目需要使用AWS的kafka&#xff0c;但是在创建和使用过程中都遇到了一些报错和麻烦&#xff0c;毕竟老外的东西&#xff0c;和阿里云、华为使用起来还是不一样。 一、创建&#xff08;创建的配置过程就略了&#xff0c;就是配置一下可用区、型号&#xff0…
阅读更多...
RNN心脏病预测

RNN心脏病预测

本文为为&#x1f517;365天深度学习训练营内部文章 原作者&#xff1a;K同学啊 一 前期准备 1.数据导入 import pandas as pd from keras.optimizers import Adam from matplotlib import pyplot as plt from sklearn.model_selection import train_test_split from sklearn.p…
阅读更多...
Flink job的提交流程

Flink job的提交流程

在Flink中&#xff0c;作业&#xff08;Job&#xff09;的提交流程是一个复杂的过程&#xff0c;涉及多个组件和模块&#xff0c;包括作业的编译、优化、序列化、任务分发、任务调度、资源分配等。Flink通过分布式架构来管理作业的生命周期&#xff0c;确保作业在不同节点上以高…
阅读更多...
std::future::then的概念和使用方法

std::future::then的概念和使用方法

std::future::then是 C 中用于异步操作的一种机制&#xff0c;它允许在一个异步任务完成后&#xff0c;接着执行另一个操作&#xff08;即延续操作&#xff09;。以下是关于 std::future::then 的概念和使用方法&#xff1a; 1. 概念&#xff1a; std::future::then 的主要目…
阅读更多...
python 边际分布图

python 边际分布图

import seaborn as snspenguins sns.load_dataset("penguins") colors {"Gentoo": #AE5259, "Adelie": #CF992C, "Chinstrap": #6B9DAA}# 分类散点图 sns.jointplot(datapenguins, x"bill_length_mm", y"bill_depth_…
阅读更多...
MyBatisPlus分页查询

MyBatisPlus分页查询

一、导入依赖 <!-- MyBatis-plus的依赖 --> <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.4</version> </dependency><!-- mysql的依赖 --> &l…
阅读更多...
CocosCreator 快速部署 TON 游戏：Web2 游戏如何使用 Ton支付

CocosCreator 快速部署 TON 游戏：Web2 游戏如何使用 Ton支付

在本篇文章中&#xff0c;我们将继续探讨如何使用 Cocos Creator 开发 Telegram 游戏&#xff0c;重点介绍如何集成 TON 支付功能。通过这一教程&#xff0c;开发者将学会如何在游戏中接入 TON Connect&#xff0c;实现钱包连接、支付以及支付后的校验流程&#xff0c;最终为 W…
阅读更多...
贴吧软件怎么切换ip

贴吧软件怎么切换ip

在网络使用中&#xff0c;有时我们需要切换IP地址来满足特定的需求&#xff0c;比如需要切换贴吧软件IP以进行不同的操作。本文将介绍几种贴吧切换IP地址的方法&#xff0c;帮助用户更好地管理自己的网络身份和访问权限。 1、更换网络环境‌ 通过连接到不同的Wi-Fi网络或使用移…
阅读更多...
TON生态小游戏开发：推广、经济模型与UI设计的建设指南

TON生态小游戏开发：推广、经济模型与UI设计的建设指南

随着区块链技术的快速发展&#xff0c;基于区块链的Web3游戏正引领行业变革。而TON生态小游戏&#xff0c;借助Telegram庞大的用户基础和TON&#xff08;The Open Network&#xff09;链上技术&#xff0c;已成为这一领域的明星之一。国内外开发者正迅速涌入&#xff0c;开发和…
阅读更多...
【开源】RISC-V 修改neofetch中的Host描述

【开源】RISC-V 修改neofetch中的Host描述

neofetch 介绍 neofetch 是一款用于在终端中显示系统信息的工具&#xff0c;其主要特点是以美观的方式展示宿主机的基本信息。它通常用于展示系统的分发版本、内核版本、硬件信息、桌面环境&#xff0c;以及一些个性化的设置&#xff0c;配合 ASCII 艺术风格的 logo&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023