一、項目初始化與環境準備
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
?
流程圖：
? ? ? ??
