在本篇博文中,我们将带您完成一个简单的知乎日报项目,主要关注如何使用 h_request库与后端接口进行交互。我们将快速搭建起项目,并利用该库的优势提高开发效率。
选择 h_request 的理由
在进行 HarmonyOS 开发时,原始的 ohos.net.http
接口虽功能强大,却往往需要编写较多的代码来处理网络请求、错误处理等。这使得开发过程变得繁琐。而 h_request 是一款从 uniapp 的 luch-request
迁移而来的轻量级网络请求库,它提供了更简洁的 API 和更少的开发负担。
h_request 的主要优点:
- 简洁易用:易于理解的 API 接口,让开发者能够快速上手。
- Promise 支持:与异步编程的结合提升了代码可读性和维护性。
- 请求与响应拦截器:方便统一处理请求头、参数及错误。
- 自动化的 JSON 数据解析:后端返回的数据会自动解析为 JSON 格式,无需手动解析。
- 支持多种请求方式:GET、POST、PUT、DELETE 等请求方式的支持非常轻松。
项目实现步骤
1. 安装 h_request 库
首先,确保项目中已经安装了 h_request 库。如果尚未安装,请运行以下命令:
ohpm install @yyz116/h_request
2. 创建网络请求封装
在 util/http.ts
文件中,对网络请求进行封装,使得全局可用。
import Request, { HttpRequestConfig, HttpResponse } from '@yyz116/h_request';
import { Log } from './logutil';
const $u = {
http: new Request(),
};
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);
}
);
};
3. 定义接口数据格式
在 apiTypes.ts
文件中,定义相应的接口数据格式。
type AnyObject = Record<string | number | symbol, any>;
export interface BaseResponse<T> {
status: number;
statusText: string;
header?: AnyObject;
data: T;
}
export interface ZhiNewsItem {
id: string;
image: string;
title: string;
url: string;
hint: string;
date: string;
}
export interface ZhiNewsRespData {
code: number;
message: string;
stories: Array<ZhiNewsItem>;
top_stories: Array<ZhiNewsItem>;
date: string;
}
export interface ZhiDetailRespData {
code: number;
message: string;
content: Array<{ types: string; value: string }>;
title: string;
author: string;
bio: string;
avatar: string;
image: string;
more: string;
}
4. 实现 API 接口
在 zhihuapi.ts
文件中,实际实现 API 接口的调用。
import { setRequestConfig } from '../../utils/http';
import { BaseResponse, ZhiNewsRespData, ZhiDetailRespData } from '../bean/ApiTypes';
// 设置请求配置
setRequestConfig();
const http = globalThis.$http;
// 获取知乎日报列表
export const getZhiHuNews = (date: string): Promise<BaseResponse<ZhiNewsRespData>> => {
return http.get('/zhihunews/' + date);
};
// 获取知乎日报详情
export const getZhiHuDetail = (id: string): Promise<BaseResponse<ZhiDetailRespData>> => {
return http.get('/zhihudetail/' + id);
};
5. 使用示例
在您的业务逻辑中调用这些接口即可。
@Component
export default struct ZhiHu {
@State message: string = 'Hello World';
// 其他状态及变量...
aboutToAppear() {
Log.info('ZhiHu aboutToAppear');
this.currentDate = formatDate(new Date());
getZhiHuNews(this.currentDate).then((res) => {
this.zhiNews = res.data.stories;
// 处理响应数据...
}).catch((err: BaseResponse<ErrorResp>) => {
Log.debug("请求错误", err.data.message);
});
}
aboutToDisappear() {
Log.info('ZhiHu aboutToDisappear');
}
}
Zhihu Daily API 介绍
知乎日报应用通过多个API来获取数据。以下是您将使用的主要官方接口:
1.最新日报:
接口:GET https://news-at.zhihu.com/api/4/news/latest
获取知乎的最新日报信息。
2.历史日报:
接口:GET https://news-at.zhihu.com/api/4/news/before/{date}
获取指定日期的历史日报。
3.热门日报:
接口:GET http://news-at.zhihu.com/api/4/news/hot
获取当前热门的文章列表。
4.主题日报:
接口:GET http://news-at.zhihu.com/api/4/news/theme/{theme_id}
根据指定主题获取日报。
5.日报详情:
接口:GET http://news-at.zhihu.com/api/4/news/{news_id}
获取指定文章的详细信息。注意,这个接口返回的是HTML格式的数据,处理时需要进行特殊处理。
注意事项
由于知乎日报的原始接口返回的详细信息为HTML格式,处理起来较为复杂。为方便练习,我已经准备好了一些处理过的接口:
幻灯片数据请求:
接口:GET http://175.178.126.10:8000/api/v1/swiperdata
知乎日报列表:
接口:GET http://175.178.126.10:8000/api/v1/zhihunews/20240720
知乎日报详情:
接口:GET http://175.178.126.10:8000/api/v1/zhihudetail/9773231
总结
通过上述步骤,您可以轻松地在 HarmonyOS 应用中实现与后端接口的交互。使用 h_request 库不仅简化了代码复杂性,还提高了代码的可读性与维护性。让我们在未来的开发中,继续探索和利用这样的工具,提升开发效率!
写在最后
最后,推荐下笔者的业余开源app影视项目“爱影家”,推荐分享给与我一样喜欢免费观影的朋友。
【注】:因涉及免费观影,该项目仅限于学习研究使用!请勿用于其他用途!
开源地址:爱影家app开源项目介绍及源码
https://gitee.com/yyz116/imovie