当前位置：首页 > article >正文

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

article 2024/11/8 5:24:11

在本篇博文中，我们将带您完成一个简单的知乎日报项目，主要关注如何使用 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');
  }
}