当前位置： 首页 > article >正文

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

article 2024/10/5 7:24:10

随着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.kler.cn/news/332833.html

相关文章：

  • 【路径规划】基于人工势场（APF）算法、Vortex APF算法、Safe APF算法和动态 Windows 方法的比较
  • Stable Diffusion的Lora使用和训练 如何使用和训练LoRA模型？你想要的都在这！--人人都可以当炼金术士！
  • Mysql数据库相关操作总结
  • ASP.NET Zero 多租户介绍
  • 《计算机原理与系统结构》学习系列——计算机的算数运算（下）
  • 【Qt+Python项目构建】- 01-首次配置 Qt Creator 14.01 for Python
  • 关键字：const
  • Mac 卸载 IDEA 流程
  • Linux基础命令sudo详解
  • 公寓管理系统|SprinBoot+vue夕阳红公寓管理系统(源码+数据库+文档)
  • 自动驾驶-轨迹拼接
  • yub‘s Algorithmic Adventures_Day5
  • wpf实现新用户页面引导
  • ValueError: You cannot perform fine-tuning on purely quantized models.
  • 2-108 基于matlab的模板匹配法实现车牌识别
  • 云原生化 - 工具镜像（完整版）
  • Matlab进阶绘图第70期—正负面积图
  • c++小游戏
  • pycharm中使用anaconda创建多环境，无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
  • 云原生化 - 基础镜像（简约版）