HarmonyOS应用开发实战：半天实现知乎日报项目（九、知乎日报项目接口使用指南）

在本篇博文中，我们将带您完成一个简单的知乎日报项目，主要关注如何使用 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 库不仅简化了代码复杂性，还提高了代码的可读性与维护性。让我们在未来的开发中，继续探索和利用这样的工具，提升开发效率！

作者：猫哥 blog.csdn.net/qq8864，转载请注明出处。

团队：坚果派 团队介绍：坚果派由坚果等人创建，团队拥有12个华为HDE带领热爱HarmonyOS/OpenHarmony的开发者，以及若干其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉。团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙原生应用，三方库60+，欢迎交流。

写在最后

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

【注】：因涉及免费观影，该项目仅限于学习研究使用！请勿用于其他用途！

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

https://gitee.com/yyz116/imovie