HarmonyOS NEXT 应用开发实战:十一、知乎日报项目接口使用指南

在本篇博文中,我们将带您完成一个简单的知乎日报项目,主要关注如何使用 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
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/910807.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32——串口

1、串口是什么 串口呢&#xff0c;作为硬件调试的时候&#xff0c;是很有用的&#xff0c;我觉得搞嵌入式是经常和串口打交道的 串口&#xff08;Serial Port&#xff09;是一种用于计算机和外部设备之间进行数据通信的接口。它通过串行通信方式传输数据&#xff0c;即一次只…

sparkSQL的UDF,最常用的regeister方式自定义函数和udf注册方式定义UDF函数 (详细讲解)

- UDF&#xff1a;一对一的函数【User Defined Functions】 - substr、split、concat、instr、length、from_unixtime - UDAF&#xff1a;多对一的函数【User Defined Aggregation Functions】 聚合函数 - count、sum、max、min、avg、collect_set/list - UDTF&#xff1a;…

水库大坝安全监测预警方法

一、监测目标 为了确保水库大坝的结构安全性和运行稳定性&#xff0c;我们需要采取一系列措施来预防和减少因自然灾害或其他潜在因素所引发的灾害损失。这不仅有助于保障广大人民群众的生命财产安全&#xff0c;还能确保水资源的合理利用和可持续发展。通过加强大坝的监测和维护…

Java:网络原理-TCP/IP

1.应用层 主要涉及两种情况: (1)使用大佬们已经创建好的应用层协议. (2)自己定义应用层协议. [1]明确前后端交互过程中,需要传递哪些信息. 比如开发一个外卖软件,展示"商家列表" 此处就需要先确定传递的信息是啥. a.请求:用户id; 用户所处的位置 b.响应:商家…

C++类的多重继承演示

一个派生类可以继承多个基类 以下代码演示派生类zzj继承两个基类people、student #include <iostream>using namespace std;class people { private:int m_age; public:people(int age);void print();~people(); };people::people(int age) {cout << "peopl…

信息安全建设方案,网络安全等保测评方案,等保技术解决方案,等保总体实施方案(Word原件)

1 概述 1.1 项目简介 1.2 测评依据 2 被测信息系统情况 2.1 定级情况 2.2 承载的业务情况 2.3 网络结构 2.4 被测对象资产 2.5 上次测评问题整改情况说明 3 测评范围与方法 3.1 测评指标 3.1.1 安全通用要求指标 3.1.2 安全扩展要求指标 3.1.3 其他安全要求指标 3.1.4 不适用安…

vue3学习---案例实现学习

目录 一&#xff0c;京东秒杀导航栏 1&#xff0c;静态样式展示 2&#xff0c;设计步骤 1&#xff0c;html骨架 2&#xff0c;css样式设计 3&#xff0c;vue3动态样式设计 1&#xff0c;v-for使用 1&#xff0c;先在js模块做如下准备 2&#xff0c;v-for遍历 2&#xff…

架构师:如何提高web网站的请求并发响应量?

文章目录 一、提出问题二、相关概念三、如何提高网站请求响应能力&#xff1f;四、负载均衡有那些方式&#xff1f;五、常用微服务架构图及推荐书籍 一、提出问题 今天&#xff0c;突然想到一个问题&#xff0c;双十一&#xff0c;那些电商网站的并发量是多大&#xff1f; 简…

中酱:健康生活的先行者

中酱&#xff1a;健康生活的先行者 在追求品质生活的道路上&#xff0c;健康是永恒的主题。每一个关乎健康的选择&#xff0c;都像是为生活点亮一盏明灯&#xff0c;指引我们走向更美好的生活。而在饮食这个与健康息息相关的领域&#xff0c;调味品的选择至关重要。中酱 —— 作…

使用CentOS宝塔面板docker搭建EasyTier内网穿透服务

0. 前言 EasyTier是一个简单、安全、去中心化的内网穿透 VPN 组网方案&#xff0c;部署方便&#xff0c;支持 MacOS/Linux/Windows/FreeBSD/Android平台&#xff0c;而且作者搭建了一个公共服务器&#xff0c;不想折腾自建服务&#xff0c;可以使用默认的公共服务器地址 tcp:/…

如何以开源加速AI企业落地,红帽带来新解法

CSDN 看到&#xff0c;生成式 AI 的火爆正在引发计算、开发、交互三大范式全面的升级和转换&#xff0c;全行业或将迎来一次全新的科技变革周期&#xff0c;可能比移动与云计算变革更加剧烈。不过 AI 经历了追求千亿模型效果和芯片、集群硬件的军备竞赛后&#xff0c;如何真正落…

计算机毕业设计Python+图神经网络手机推荐系统 手机价格预测 手机可视化 手机数据分析 手机爬虫 Django Flask Spark 知识图谱

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

【C语言】分支和循环详解(下)猜数字游戏

与诸君共进步&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 文章目录 1. 随机数的生成2. 猜数字小游戏的实现 1. 随机数的生成 掌握了前⾯学习的这些知识&#xff0c;我们就可以写⼀些稍微有趣的代码了&#xff0c;⽐如&#xff1a; 写⼀个猜数字游戏 游戏要求…

iOS灵动岛动画小组件怎么播放动画

这个灵动岛相关的展示位置分几个地方&#xff1a; 紧凑型&#xff0c;最小化&#xff0c;扩展型&#xff0c;还有锁屏位置 我们先来看一下我这边实现的动画效果 demo下载&#xff1a; iOS灵动岛GIF动画 灵动岛样式 灵动岛有三种渲染模式&#xff1a; 第一种是 紧凑型&…

西门子KTP系列HMI用户自定义弹窗-多弹窗共用

接上一个文章内容《西门子KTP系列HMI用户自定义弹窗》西门子KTP系列HMI用户自定义弹窗-CSDN博客 当我需要别的操作并且需要弹窗时&#xff0c;整个弹窗的内容和变量都需要重复重新绑定&#xff1b;如下图所示&#xff1a; 由上图可看出当前的自定义弹窗有以下缺点&#xff1a; …

Unity使用Spine导致设备发烫

spine制作过程中&#xff0c;美术同学使用裁剪技术 将一个特效文件做固定范围显示&#xff0c;实际上非常消耗CPU算力。 解决办法&#xff1a; 交给程序来实现裁剪&#xff0c;只要加Mask组件即可

您与此网站之间建立的连接不安全解决方法

如果你打开网站&#xff0c;地址栏有警告&#xff0c;点进去是这样的提示&#xff1a;您与此网站之间建立的连接不安全&#xff0c;了解详细信息。 请勿在此网站上输入任何敏感信息&#xff08;例如密码或信用卡信息&#xff09;&#xff0c;因为攻击者可能会盗取这些信息。 …

【flask开启进程,前端内容图片化并转pdf-会议签到补充】

flask开启进程,前端内容图片化并转pdf-会议签到补充 flask及flask-socketio开启threading页面内容转图片转pdf流程前端主js代码内容转图片-browser端browser端的同步编程flask的主要功能route,def 总结 用到了pdf,来回数据转发和合成,担心flask卡顿,响应差,于是刚好看到threadi…

R7:糖尿病预测模型优化探索

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、实验目的&#xff1a; 探索本案例是否还有进一步优化的空间 二、实验环境&#xff1a; 语言环境&#xff1a;python 3.8编译器&#xff1a;Jupyter notebo…

张氏宗谱序言白话文翻译

序言&#xff1a; 回想千家有赤松子的传承&#xff0c;张家有 “百忍” 的风范。感慨因迁徙和战乱、水灾之苦&#xff0c;远居他乡而失去了家族秩序。想起自从从泗州来到淮安&#xff0c;安家在安东县东北乡众湖荡之地。&#xff08;这里可能在回忆家族的迁徙历史&#xff09;…