开发者技术支持-基于 uniapp 开发鸿蒙元服务请求工具封装

1.1 问题说明

在 uniapp 开发鸿蒙元服务过程中，网络请求是数据交互的核心。尽管 uni.request 提供了跨平台能力，但直接使用仍存在诸多痛点：缺乏统一的请求拦截与响应拦截、错误处理分散、Loading 状态管理混乱、请求取消困难、超时重试未统一处理，且鸿蒙元服务对网络安全配置（如允许 HTTP 明文请求、权限声明）有特殊要求。若不封装，会导致大量重复代码、不一致的用户体验，甚至因鸿蒙配置不当导致请求失败。

1.2 原因分析

· 缺乏拦截机制
每个请求都要重复添加 Token、处理错误码、显示 Loading，代码臃肿。

· 错误处理零散
网络超时、业务状态码（如 401）未集中处理，用户提示混乱。

· Loading 管理复杂
并发请求时 Loading 显示/隐藏需手动计数，易出错。

· 请求取消缺失
各页面卸载时未取消 pending 请求，造成资源浪费或报错。

· 鸿蒙网络配置特殊
需声明 ohos.permission.INTERNET 权限，且默认禁止 HTTP 明文请求，开发者容易遗漏。

1.3 解决思路

· 设计统一请求类
封装 uni.request，提供 request(options)、get/post 快捷方法，内部统一处理拦截器、错误码、Loading、重试、取消。

· 支持拦截器
通过计数器控制全局 Loading 显示隐藏，避免并发问题。

· 自动 Loading 计数
将各平台返回的状态映射为 GRANTED、DENIED、NEVER_ASK_AGAIN，所有接口返回标准化状态，便于业务层判断。

· 统一错误处理
利用 AbortController 或 requestTask.abort() 实现取消。

· 明确鸿蒙配置
在文档中给出 config.json 配置示例，确保网络请求在鸿蒙上正常运行。

1.4 解决方案

核心接口设计制

// src/utils/http.js 简化版

class Http {

  constructor() {

    this.interceptors = { request: [], response: [] }

  }

  useRequestInterceptor(fulfilled) { this.interceptors.request.push(fulfilled) }

  useResponseInterceptor(fulfilled) { this.interceptors.response.push(fulfilled) }

  async request(options) {

    // 合并默认配置：baseURL, timeout, retry, loading, showError等

    const config = { baseURL: '', timeout: 10000, retry: 2, loading: false, ...options }

    // 执行请求拦截器

    for (const interceptor of this.interceptors.request) {

      Object.assign(config, interceptor(config))

    }

    // 发起请求（带重试、loading、错误处理）

    return this._requestWithRetry(config)

  }

  get(url, data, options) { return this.request({ method: 'GET', url, data, ...options }) }

  post(url, data, options) { return this.request({ method: 'POST', url, data, ...options }) }

}

export const http = new Http()

拦截器与使用示例

javascript

// 入口配置

http.useRequestInterceptor(config => {

  const token = uni.getStorageSync('token')

  if (token) config.header = { ...config.header, Authorization: `Bearer ${token}` }

  return config

})

http.useResponseInterceptor(res => {

  if (res.statusCode === 200 && res.data.code === 0) return res.data.data

  throw { message: res.data.message || '请求失败', code: res.data.code }

})

// 页面调用

async fetchData() {

  try {

    const data = await http.get('/user/info', {}, { loading: true })

    this.user = data

  } catch (e) {

    // 错误已在内部统一提示，无需额外处理

  }

}

鸿蒙元服务网络配置

在鸿蒙元服务的 config.json 中添加：

json

{

  "module": {

    "reqPermissions": [{"name": "ohos.permission.INTERNET"}],

    "deviceConfig": {

      "default": {

        "network": {"cleartextTraffic": true}  // 调试时可允许HTTP

      }

    }

  }

}

1.5 总结

· 问题与痛点：网络请求缺少统一拦截、错误处理、Loading 管理、取消机制及鸿蒙配置复杂。

· 技术要点：封装统一请求类，支持拦截器、自动 Loading、重试、取消；明确鸿蒙网络配置要求。

· 实现效果：业务层调用简洁，代码复用率高，用户体验一致，鸿蒙元服务网络请求稳定。

· 适用场景：所有需要网络请求的 uniapp 项目，特别是多端适配（含鸿蒙元服务）的应用。