但是现在还没人气,可能一些伙伴不会用。这里特写了篇文章和使用demo,发出来让大家看下,原来写网络接口竟可以如此简单。
看以下接口示例:
首先项目中先引入我发布到鸿蒙中心仓库的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 = (): Promise<BaseResponse<SwiperData>> => http.get('/swiperdata');
// 获取热门影视接口
export const getHotMovie = (req:HotMovieReq): Promise<BaseResponse<MovieRespData>> => 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": "郑州"
}
//file:ApiTypes.ts
export interface BaseResponse<T>{
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: Array<SwiperItem>;
}
// 热门影视请求数据
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: Array<MovieItem>;
count: number;
start: number;
total: number;
title: string;
}
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 = (): Promise<BaseResponse<SwiperData>> => http.get('/swiperdata');
// 获取热门影视接口
export const getHotMovie = (req:HotMovieReq): Promise<BaseResponse<MovieRespData>> => http.post('/hotmovie',req);
如果get的接口,带参数呢?带参数的话可以这样写:
// 发送get请求,带参数,实际请求为:xxx.xxx/api/v1/musicsearchlrc?id=""&kind=""
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)
});
})
接下来就可以在页面中愉快的使用接口啦,可以看到使用变得十分简单。示例如下:
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影视项目“爱影家”,推荐分享给与我一样喜欢观影的朋友。
https://gitee.com/yyz116/imovie