专业微网站建设公司,站长之家最新网站,长春市宽城区建设局网站,网站建设模拟软件网络访问接口#xff0c;使用频次最高。之前习惯了uniapp下的网络接口风格#xff0c;使用起来贼简单方便。转战到鸿蒙上后#xff0c;原始网络接口写着真累啊#xff01;目标让鸿蒙上网络接口使用#xff0c;简单程度比肩uniapp#xff0c;比Axios更轻量级。源码量也不多… 网络访问接口使用频次最高。之前习惯了uniapp下的网络接口风格使用起来贼简单方便。转战到鸿蒙上后原始网络接口写着真累啊目标让鸿蒙上网络接口使用简单程度比肩uniapp比Axios更轻量级。源码量也不多但更方便定制优化功能也不弱。 前言
接上篇HarmonyOS NEXT应用开发(一、打造最好用的网络通信模块组件)-CSDN博客网络库已经封装好啦成功发布到了OpenHarmony三方库中心仓。地址OpenHarmony三方库中心仓
但是现在还没人气可能一些伙伴不会用。这里特写了篇文章和使用demo发出来让大家看下原来写网络接口竟可以如此简单。
有多简单demo源码地址zhihudaily: HarmonyOS NEXT 项目开发实战仿知乎日报的实现
看以下接口示例
首先项目中先引入我发布到鸿蒙中心仓库的h_request网络库
dependencies: {yyz116/h_request: 1.0.1} 以下home.ts的首页相关的api接口中两行代码就写好了两个接口够简单清晰吧。一个是获取影视轮播图的get接口一个是获取影视数据的post接口请求。
//main/ets/common/api/home.ts
import { setRequestConfig } from ../../utils/http;
import { BaseResponse,SwiperData,HotMovieReq,MovieRespData } from ../bean/ApiTypes;// 调用setRequestConfig函数进行请求配置
setRequestConfig();const http globalThis.$http;// 获取轮播图api接口
export const getSwiperList (): PromiseBaseResponseSwiperData http.get(/swiperdata);// 获取热门影视接口
export const getHotMovie (req:HotMovieReq): PromiseBaseResponseMovieRespData http.post(/hotmovie,req); 详细示例
接口实现
准备两个后台接口
### 1.首页,影视轮播图
get http://175.178.126.10:8000/api/v1/swiperdata### 2.首页,正在热映的电影
post http://175.178.126.10:8000/api/v1/hotmovie
Content-Type:application/json{start: 0,count: 1,city: 郑州
}
在项目工程源码ets/main/common/bean/目录下创建网络通信json包协议的type定义
//file:ApiTypes.ts
export interface BaseResponseT{status: number;statusText:string;data:T;
}export interface ErrorResponse {code: number;message: string;data: [];
}// 轮播图响应数据
export interface SwiperItem{id:string;imageUrl:string;title:string;url:string;description:string;
}
export interface SwiperData {code: number;message: string;data: ArraySwiperItem;
}// 热门影视请求数据
export interface HotMovieReq {start: number;count: number;city:string;
}
// 热门影视响应数据
interface MovieItem{id:string;cover:string;title:string;gener:string;rate:number;
}
export interface MovieRespData {code: number;message: string;data: ArrayMovieItem;count: number;start: number;total: number;title: string;
}
创建个utils文件夹放置封装的http.ts工具类这个主要用来配置全局后台服务地址参数和设置全局拦截器并把其网络请求实例挂载在ArkTS引擎实例内部的一个全局对象globalThis中供全局使用。
import Request, { HttpRequestConfig, HttpResponse } from yyz116/h_request
import { Log } from ./logutil;
const $u {http: new Request(),
}
//挂载在ArkTS引擎实例内部的一个全局对象globalThis中供全局使用
globalThis.$http $u.http;export const setRequestConfig () {globalThis.$http.setConfig((config:HttpRequestConfig) {config.baseURL http://175.178.126.10:8000/api/v1;return config;});// 请求拦截globalThis.$http.interceptors.request.use((config) {Log.debug(请求拦截)return config},(error) {return Promise.reject(error)})// 响应拦截globalThis.$http.interceptors.response.use((response:HttpResponse) {Log.debug(响应拦截)if (response.data.code 401) {// 提示重新登录console.log(请登录)setTimeout(() {console.log(请请登录)}, 1000);}return response},(error) {return Promise.reject(error)})
}
接下来就是写接口啦以下示例一个是get接口使用一个是post接口使用且带post的数据。
import { setRequestConfig } from ../../utils/http;
import { BaseResponse,SwiperData,HotMovieReq,MovieRespData } from ../bean/ApiTypes;// 调用setRequestConfig函数进行请求配置
setRequestConfig();const http globalThis.$http;// 获取轮播图api接口
export const getSwiperList (): PromiseBaseResponseSwiperData http.get(/swiperdata);// 获取热门影视接口
export const getHotMovie (req:HotMovieReq): PromiseBaseResponseMovieRespData http.post(/hotmovie,req); 如果get的接口带参数呢带参数的话可以这样写
// 发送get请求带参数实际请求为:xxx.xxx/api/v1/musicsearchlrc?idkind
http.get(api/v1/musicsearchlrc, {params:{id:543656129,kind:wy}}).then((res:HttpResponseResult) {hilog.debug(0x0000,request,res.data.message)hilog.debug(0x0000,request,res.data.code:%{public}d,res.data.code)}).catch((err:HttpResponseError) {hilog.debug(0x0000,request,err.data.code:%d,err.data.code)hilog.debug(0x0000,request,err.data.message)});})
如何使用
接下来就可以在页面中愉快的使用接口啦可以看到使用变得十分简单。示例如下
import {getSwiperList,getHotMovie} from ../common/api/home
import { hilog } from kit.PerformanceAnalysisKit;
import { ErrorResponse } from ../common/bean/ApiTypes;Entry
Component
struct Index {State message: string Hello World;// 只有被Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info(Index onPageShow);}// 只有被Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info(Index onPageHide);}// 只有被Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info(Index onBackPress);}// 组件生命周期aboutToAppear() {console.info(MyComponent aboutToAppear);}// 组件生命周期aboutToDisappear() {console.info(MyComponent aboutToDisappear);}build() {Row() {Column() {Text(this.message).id(HelloWorld).fontSize(50).fontWeight(FontWeight.Bold)Button(test).onClick(() {console.info(button click);getSwiperList().then((res) {hilog.debug(0x0000,request,res.data.message)hilog.debug(0x0000,request,res.data.code:%{public}d,res.data.code)hilog.debug(0x0000,request,res.data.data[0]:%{public}s,res.data.data[0].id)hilog.debug(0x0000,request,res.data.data[0]:%{public}s,res.data.data[0].imageUrl)hilog.debug(0x0000,request,res.data.data[0]:%{public}s,res.data.data[0].title)}).catch((err:ErrorResponse) {hilog.debug(0x0000,request,err.data.code:%d,err.code)hilog.debug(0x0000,request,err.message)});getHotMovie({start:0,count:1,city:郑州}).then((res) {hilog.debug(0x0000,request,res.data.message)hilog.debug(0x0000,request,res.data.code:%{public}d,res.data.code)hilog.debug(0x0000,request,res.data.data[0]:%{public}s,res.data.data[0].id)hilog.debug(0x0000,request,res.data.data[0]:%{public}s,res.data.data[0].gener)hilog.debug(0x0000,request,res.data.data[0]:%{public}s,res.data.data[0].title)}).catch((err:ErrorResponse) {hilog.debug(0x0000,request,err.data.code:%d,err.code)hilog.debug(0x0000,request,err.message)});})}.height(100%).width(100%)}}
}
总结
以上就是笔者封装的鸿蒙开源库h_request的使用介绍。可以看出使用此网络封装库后在鸿蒙的网络服务开发上也可以体验到如uniapp小程序开发般的简单易用。分享给有需要的小伙伴欢迎留言评论并提宝贵意见最终打造出一个在鸿蒙平台上最简单好用的网络库。
写在最后
最后推荐下笔者的业余开源app影视项目“爱影家”推荐分享给与我一样喜欢观影的朋友。
开源地址:爱影家app开源项目介绍及源码
https://gitee.com/yyz116/imovie
