论坛 › 鸿蒙 › HarmonyOS NEXT - 电商App实例二（ 网络请求http）

钜形不锈钢水箱 发表于 2025-4-4 18:26:42

HarmonyOS NEXT - 电商App实例二（ 网络请求http）

        在HarmonyOS中进行网络请求开发时，可以利用"@ohos.net.http"库，该库支持常见的HTTP方法，可以或许满意大多数应用或元服务的需求。
        接下来，我们将通过http库，对其进行二次封装，并向后台发送请求，完成banner数据的获取。
https://i-blog.csdnimg.cn/direct/42a37cc3b2f14e43aeb36d4d923dcee8.png
一、根本利用

1.1 导入模块

import http from '@ohos.net.http' 1.2 http请求数据

        首先，我们先看下@ohos.net.http的根本用法，利用http模块发送一个GET请求，处理相应。示例代码如下：
import http from '@ohos.net.http';

// 创建 HTTP 请求对象
let httpRequest = http.createHttp();

// 发送 GET 请求
httpRequest.request(
    "https://api.example.com/data",
    {
      method: http.RequestMethod.GET,
      header: {
            'Content-Type': 'application/json'
      }
    },
    (err, data) => {
      if (err) {
            console.error('Error:', err);
      } else {
            console.log('Response Code:', data.responseCode);
            console.log('Response Data:', data.result);
      }
    }
);
1.3 HttpRequestOptions

        参数如下表：
名称
类型
描述
method
RequestMethod
请求方式：GET、POST、PUT、DELETE等
extraData
string|Object
请求参数
header
Object
请求字段
connectTimeout
number
毗连超时时间，单位毫秒，默认是60000ms
readTimeout
number
读取超时时间，同上

1.4 HttpResponse

        参数如下表：
名称
类型
描述
responseCode
ResponseCode
相应状态码
header
Object
相应头
cookies
string
相应返回的cookies
result
string|Object
相应体，默认是JSON字符串
resultType
HttpDataType
返回值类型

二、Http库

        官方提供的"@ohos.net.http库，支持常见的Http方法，如 get、post、options、head、put、delete、trace、connect等，为了简化网络请求的流程，更好地复用和管理代码，我们可以对@ohos.net.http进行封装，使其更易于利用。
        在网络请求中，通常需要考虑以下几个方面：

[*]请求方法：利用哪种Http方法（GET、POSt、PUT、DELETE）来发送请求。
[*]请求头：设置必要的请求头，例如Content-Type、Authorization等。
[*]请求体：对POST、PUT请求，可能需要发送请求体。请求体可以是Json数据、表单数据或文件等。
[*]处理相应：处理网络请求过程中可能出现的错误，例如超时，网络不可用、服务器错误等。
[*]异步处理：网络请求通常是异步的，需要利用回调、Promise、async/awai等机制来处理异步操作。
[*]安全性：确保网络请求的安全性，例如利用HTTPS、验证证书、防止CSRF攻击等。

2.1 封装@ohos.net.http

        为了简化代码并提高复用性，可以将@ohos.net.http封装成一个工具类。先在ets目次下创建utils目次，再创建httpUtil类（路径：ets/utils/httpUtil.ts）。代码如下：
import http from '@ohos.net.http';

/**
* http封装类
*/
export class HttpUtil {
private base_url: string = '';// 基础路径
private headers: Record<string, string> | null = null; // header信息
private httpRequest: http.HttpRequest; // request请求

/**
   * 构造函数
   * @param url 基础路径
   * @param headers header信息
   */
constructor(url?: string, headers?: Record<string, string>) {
    this.httpRequest = http.createHttp()
    if (url) this.base_url = url
    if (headers) this.headers = headers
}

/**
   * 设置基础路径
   * @param url
   */
setBaseUrl(url: string) {
    this.base_url = url
}

/**
   * 设置header信息
   * @param headers
   */
setHeaders(headers: Record<string, string>) {
    this.headers = headers
}

/**
   * 销毁 http 请求对象
   */
public destroy(){
    this.httpRequest.destroy()
}

/**
   * 发送HTTP请求
   * @param url 请求地址
   * @param method请求方法（如GET、POST、PUT、DELETE）
   * @param headers 请求头
   * @param data请求体（仅用于 POST/PUT）
   * @returns 返回响应数据
   */
public async request (
    url: string,
    method: http.RequestMethod = http.RequestMethod.GET,
    headers: Record<string, string> = {},
    data?: Record<string, any>
): Promise<any> {
    // 合并基础路径
    const _url = this.base_url ? this.base_url + url : url
    // 合并header信息
    const _headers = this.headers ? Object.assign({}, this.headers, headers) : !headers ? {} : headers
    return new Promise((resolve, reject) => {
      this.httpRequest.request(_url, {
      method: method,
      header: _headers,
      extraData: data
      }, (err, response) => {
      if (err) {
          reject(err)
      } else {
          // 如果请求成功，返回正确结果，否则返回错误信息
          if (response.responseCode == http.ResponseCode.OK) {
            resolve(response.result)
          } else {
            reject('HttP Error:' + response.responseCode)
          }
      }
      })
    })
}

/**
   * 发送 GET 请求
   * @param url 请求地址
   * @param headers 请求头
   * @returns 返回响应数据
   */
public async get(url: string, headers?: Record<string, string>) : Promise<any> {
    return this.request(url, http.RequestMethod.GET, headers)
}

/**
   * 发送 POST请求
   * @param url 请求地址
   * @param data 请求体
   * @param headers 请求头
   * @returns 返回响应数据
   */
public async post(url: string, data: Record<string, any>, headers?: Record<string, string>) : Promise<any> {
    return this.request(url, http.RequestMethod.POST, headers, data)
}
}

2.2 实例httpUtil类

        在utils目次中，再创建request请求文件（路径：ets/utils/request.ts），用于初始化http请求的底子路径和header请求类型信息，而且全局共享该实例对象。示例代码如下：
import { HttpUtil } from './httpUtil'

/**
* 初始化请求 实例类
*/
export const httpRequest = new HttpUtil('http://test.shop.com', {
'Content-Type': 'application/json'
})

2.3 api请求

        在api目次创建，创建index.ts文件，用于定义具体业务请求函数。这里向后台发送一个GET请求，用于获取banner信息。示例代码如下：
import { httpRequest } from '../utils/request'

/**
* 获取banner信息
*/
export const getBannerInfo = async () => {
return await httpRequest.get('/banner.php')
}

2.4 获取banner信息

        如下图，在页面中添加按钮，点击“获取banner信息”，向后台发送GET请求，获取banner数据。
https://i-blog.csdnimg.cn/direct/b37b195b65804567aa1a37b0e2424177.png
        打开pages/index.ets 页面文件，添加http请求。代码如下：
import { getBannerInfo } from '../api/index'

@Entry
@Component
struct Index {
@State bannerMessage: string = '';

build() {
    RelativeContainer() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }){
      Text(this.bannerMessage)

      Button('获取banner信息').onClick(async () => {
          console.log('tag')
          await getBannerInfo().then(res => {
            this.bannerMessage = JSON.stringify(res)
            console.log('tas success', res)
          }).catch(() => {
            console.error('Error')
          })
      })
      }.width('100%')
    }
    .height('100%')
    .width('100%')
}
}         但是，各人会发现Promise回调结果 res变量下方出现了波浪线，并提示错误为：Use explicit types instead of "any", "unknown" (arkts-no-any-unknown) <ArkTSCheck>。这是因为在ArkTS中，利用any或unknow 类型会降低代码的类型的安全性，因此需要利用显式类来替换它们，确保类型安全。
https://i-blog.csdnimg.cn/direct/3eadba860b9246d5a346a72a04b2b282.png

2.5 定义接口

        下面为请求和相应的数据类型定义明白的接口，并利用泛型来加强类型安全性。在types目次中创建http.d.ts文件，用于定义http的接口。代码如下：
import http from '@ohos.net.http';

// 定义请求参数接口
interface RequestOptions {
url: string;
method?: http.RequestMethod,
headers?: Record<string, string>;
data?: Record<string, any>;
timeout?: number
}

// 定义响应数据接口
interface HttpResponse<T> {
responseCode: number;
result: T;
}
2.6 httpUtil改造

       将定义的接口数据引入到httpUtil.ts中，对request、get、post等方法，增加泛型，通过表现类类型定义，确保请求和相应的数据类型一致。改造后的httpUtils 代码如下：
import http from '@ohos.net.http';
import { HttpResponse, RequestOptions } from '../types/http';

/**
* http封装类
*/
export class HttpUtil {
private base_url: string = '';// 基础路径
private headers: Record<string, string> | null = null; // header信息
private httpRequest: http.HttpRequest; // request请求

/**
   * 构造函数
   * @param url 基础路径
   * @param headers header信息
   */
constructor(url?: string, headers?: Record<string, string>) {
    this.httpRequest = http.createHttp()
    if (url) this.base_url = url
    if (headers) this.headers = headers
}

/**
   * 设置基础路径
   * @param url
   */
setBaseUrl(url: string) {
    this.base_url = url
}

/**
   * 设置header信息
   * @param headers
   */
setHeaders(headers: Record<string, string>) {
    this.headers = headers
}

/**
   * 销毁 http 请求对象
   */
public destroy(){
    this.httpRequest.destroy()
}

/**
   * 发送HTTP请求
   * @param options 请求参数
   * @returns 返回响应数据
   */
public async request <T> (options : RequestOptions ): Promise<T> {
    // 合并基础路径
    const _url = this.base_url ? this.base_url + options.url : options.url
    // 合并header信息
    const _headers = this.headers ? Object.assign({}, this.headers, options.headers) :
                      !options.headers ? {} : options.headers
    return new Promise((resolve, reject) => {
      this.httpRequest.request(_url, {
      method: options.method || http.RequestMethod.GET,
      header: _headers,
      extraData: options.data || {},
      readTimeout: options.timeout || 5000,
      connectTimeout: options.timeout || 5000
      }, (err, response) => {
      if (err) {
          reject(err)
      } else {
          // 如果请求成功，返回正确结果，否则返回错误信息
          if (response.responseCode == http.ResponseCode.OK) {
            resolve(response.result as T)
          } else {
            reject('HttP Error:' + response.responseCode)
          }
      }
      })
    })
}

/**
   * 发送 GET 请求
   * @param url 请求地址
   * @param headers 请求头
   * @returns 返回响应数据
   */
public async get <T> (url: string, headers?: Record<string, string>) : Promise<T> {
    return this.request <T> ({url, method: http.RequestMethod.GET, headers})
}

/**
   * 发送 POST请求
   * @param url 请求地址
   * @param data 请求体
   * @param headers 请求头
   * @returns 返回响应数据
   */
public async post <T> (
    url: string, data: Record<string, any>, headers?: Record<string, string>
) : Promise<T> {
    return this.request({url, method: http.RequestMethod.POST, headers, data })
}
}

2.7 api更改

        定义banner信息数据类型，在发起get请求位置，将类型传入进去。代码如下：
interface apiBanner {
id: number;
name: string;
thumb: string;
uid: number;
createTime: Date;
updateTime: Date;
}

/**
* 获取banner信息
*/
export const getBannerInfo = async () => {
return await httpRequest.get<apiBanner>('/banner.php')
}
        当httpUtil类和api请求改造好后，在页面中点击按钮，获取banner信息。如下图：
https://i-blog.csdnimg.cn/direct/ef7dd87adbf04b1a8204daa7a2275dae.pnghttps://i-blog.csdnimg.cn/direct/8d462159768d400f81bc3c6f7c05b1b5.png
        点击按钮后，getBannerInfo接口向后台发送了一个请求，成功获取了接口相应的数据，并通过Text组件将数据表现在App界面中。
        在项目开发中，Http请求扮演着至关重要的角色，http请求是App与服务器之间进行数据交互的主要方式。通过发送http请求，App可以从服务器获取数据，如用户信息，产物信息等，也可以向服务器提交数据，如表单数据，文件上传等。这种数据交互是App实现各种功能的底子。
        假如你有更多题目，接待随时沟通交换！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: HarmonyOS NEXT - 电商App实例二（ 网络请求http）