鸿蒙应用（医院诊疗系统）开发篇2·Axios网络请求封装全流程解析

news2025/7/18 8:19:22

一、项目初始化与环境准备

1. 创建鸿蒙工程

src/main/ets/  
├── api/  
│   ├── api.ets       # 接口聚合入口  
│   ├── login.ets     # 登录模块接口  
│   └── request.ets   # 网络请求核心封装  
└── pages/  
    └── login.ets     # 登录页面逻辑

通过DevEco Studio新建项目，手动添加生成上面目录结构。

2. 安装axios依赖

在终端执行（必须联网）：

ohpm install @ohos/axios

作用：

引入与Web端兼容的HTTP库，自动处理鸿蒙系统网络接口适配

二、配置网络权限（关键步骤！）

修改entry/src/main/module.json5 ，添加内容：

"module": {  
  "requestPermissions": [  
    {  
      "name": "ohos.permission.INTERNET"
    }  
  ]  
}

常见问题：

权限未声明 → 应用崩溃且无网络响应；生产环境需补充ohos.permission.NOTIFICATION 等权限说明

三、核心代码分步实现

1. 网络请求核心层 `api/request.ets`

//封装axios网络请求模块
import axios,{InternalAxiosRequestConfig,AxiosResponse}from '@ohos/axios'

export interface Option_Type{
  method?:string
  url:string
  data?:object
  params?:object
  headers?:object
}

interface Request_dataType{
  code:number
  message?:string
  data?:object | null
}

const  request = axios.create({//使用const声明
  baseURL:"http://159.75.169.224:3321/v3pz",// API网关地址
  headers:{Terminal:"h5"}, // 终端标识(告诉服务器是手机还是电脑访问)
  timeout:15000///增加超时配置，防止长时间阻塞
})
//请求拦截器优化
request.interceptors.request.use((req:InternalAxiosRequestConfig)=>{
  req.headers['h-token'] = "d43ff2fe3e5b0927df54662af86d4ac8"

  return req
})

function http(options: Option_Type) {
  // 获取请求方法，默认使用GET
  let method = options.method  || "GET" // 若未指定method则赋默认值

  // 将GET请求的data参数转为params
  if (method.toLowerCase()  === "get") { // 统一转为小写比较
    options.params  = options.data  // 将data内容转移到params
  }

  // 发送请求
  return request(options) // 调用axios实例发送请求
}

//全局响应处理，统一错误逻辑,接收http结果 → 返回业务数据
export default async function test<T>(options: Option_Type): Promise<T> {
  // 发送请求并等待响应
  let result: AxiosResponse<Request_dataType> = await http(options) // 异步等待请求完成

  // 解构响应数据
  let res = result.data       // 获取响应主体数据
  let code = res.code         // 提取状态码
  console.log(" 输入obj", JSON.stringify(res))  // 开发调试日志
  console.log("[DEBUG]  响应原始数据:", result); // 打印完整响应对象
  console.log("[INFO]  解析后的状态码:", res.code);

  // 状态码判断
  if (code=== 10000) {
    return res.data  as T               // 成功时返回数据
  } else if (code === -2 && res.message  === 'token错误') {
    throw new Error(res.message)        // 特定错误处理
  } else {
    throw new Error(res.message)        // 通用错误处理
  }

}

2. 登录接口层 `api/login.ets`

//数据模型定义,接口封装
import request from './request'
// 定义登录接口返回数据类型
export interface return_login_type{
  token:string,
  userInfo:userInfo
}
// 用户基础信息实体类
export interface userInfo{
  avatar:string,
  name:string
}
// 登录请求参数接口
interface login_type{
  passWord:string
  userName:string
}

export function login_submit(data:login_type){
  return request<return_login_type>({//调用request接口
    url:'./login' ,// 接口路径
    method:'post',
    data
  })
}

3. 接口聚合层 `api/api.ets`

// 📎 统一导出所有业务接口（便于模块化管理）  
export * from './login';  
// 后续可添加：  
// export * from './user';  
// export * from './order';

4. 视图层 pages/login.ets

//页面周期控制，UI框架集成
import { login_submit } from '../api/api';

@Entry
@Component
struct login{
  onPageShow(): void {
    login_submit({//调用了api/login_submit接口
      // 模拟用户登录（硬编码账号密码存在安全风险）
      userName:"18993391234",
      passWord:"123456"
    })


  }
  build(){

  }
}

注册账号：http://159.75.169.224:3322

注册后填写信息到代码。

在pages\login.ets使用previewer，得到调试信息

04-16 22:06:26.302 33376-34256 A0c0d0/JSAPP I 输入obj {"code":10000,"message":"success","data":{"token":"00a688216d7c1858fc1b4d3da6a36a8c","userInfo":{"avatar":"http://159.75.169.224:5500/avatar.jpeg","name":"admin"}}}
04-16 22:06:26.302 33376-34256 A0c0d0/JSAPP I [DEBUG] 响应原始数据: [object Object]
04-16 22:06:26.302 33376-34256 A0c0d0/JSAPP I [INFO] 解析后的状态码: 10000

流程图：