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

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

news 来源：原创 2025/5/26 9:23:38

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

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?:stringurl:stringdata?:objectparams?:objectheaders?:object
}interface Request_dataType{code:numbermessage?:stringdata?: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) {// 获取请求方法，默认使用GETlet method = options.method  || "GET" // 若未指定method则赋默认值// 将GET请求的data参数转为paramsif (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:stringuserName: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

流程图：