鸿蒙Axios封装全攻略
封装核心价值:通过统一拦截器实现错误处理、日志记录、权限校验等横切关注点,提升代码复用率与可维护性。建议结合业务场景扩展重试机制、请求缓存等高级功能。在 oh-package.json5 中自动添加依赖记录,安装后需同步工程配置。2. 创建 Axios 实例(核心封装)3. 定义数据类型(增强类型安全)一、基础封装流程**
·
一、基础封装流程**
1. 安装依赖
通过 OpenHarmony Package Manager 安装适配库:
在 oh-package.json5 中自动添加依赖记录,安装后需同步工程配置。
2. 创建 Axios 实例(核心封装)
新建工具类文件(如 AxiosUtils.ets):
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';
import BuildProfile from 'BuildProfile';
import { TOKEN_KEY } from '../constants/SettingKey'
//创建使用实例,提供初始配置
const instance = axios.create({
baseURL: BuildProfile.BASE_URL, //自动组合到请求路径的前面
readTimeout: 10000
})
//请求拦截配置
instance.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
config.headers.Authorization = AppStorage.get(TOKEN_KEY) || ''
if (config.method === 'POST') {
config.headers['Content-Type'] = 'application/json';
}
return config
},
//错误时
(err: AxiosError) => {
return Promise.reject(err)
}
)
// 响应拦截配置
instance.interceptors.response.use(
//响应结果:
(response: AxiosResponse) => {
console.log('响应拦截', JSON.stringify(response.data))
//判断处理
if (response.status === 200) {
if (response.data && response.data.code === 0) {
return response.data.data
}
else{
return Promise.reject(response.data?.msg)
}
} else {
console.log('业务处理异常', response.data?.msg)
return Promise.reject(response.data?.msg)
}
},
//错误处理
(err: AxiosError) => {
// 是否401
if (err.response?.status === 401) {
// 令牌过期:180天有效期
AppStorage.setOrCreate(TOKEN_KEY, '')
}
return Promise.reject(err)
}
)
function request<R = null, D = null>(config: AxiosRequestConfig) {
return instance<null, R, D>(config)
}
// 功能类
export class AxiosUtils {
static get<T>(url: string, data?: object): Promise<ResponseModel<T>> {
return request<ResponseModel<T>, null>({ url: url, params: data, method: 'GET' })
}
static post<T>(url: string, data?: object): Promise<ResponseModel<T>> {
return request<ResponseModel<T>, null>({ url: url, data: data, method: 'POST' })
}
static put<T>(url: string, data?: object): Promise<ResponseModel<T>> {
return request<ResponseModel<T>, null>({ url: url, params: data, method: 'PUT' })
}
static delete<T>(url: string, data?: object): Promise<ResponseModel<T>> {
return request<ResponseModel<T>, null>({ url: url, params: data, method: 'DELETE' })
}
}
3. 定义数据类型(增强类型安全)
// 响应返回的数据类型
class ResponseModel<T> {
code: number = 0;
msg: string = '';
data: T;
constructor(code: number, msg: string, data: T) {
this.code = code;
this.msg = msg;
this.data = data;
}
}
二、实际调用示例
import { passLoginApi } from '../../api/Auth'
import { PromptAction } from '@kit.ArkUI';
@Entry
@Component
struct Login {
uiContext: UIContext = this.getUIContext();
promptAction: PromptAction = this.uiContext.getPromptAction();
@State mobile: string = ''
@State password: string = ''
async loginHandler() {
if (!this.mobile) {
this.promptAction.openToast({ message: "请输入手机号!" })
return
}
if (!this.password) {
this.promptAction.openToast({ message: "请输入密码!" })
return
}
try {
const res = await passLoginApi({ mobile: this.mobile, password: this.password })
if (res) {
this.promptAction.openToast({ message: "登录成功" })
}
} catch (error) {
this.promptAction.openToast({ message: error })
}
}
build() {
Column({ space: 20 }) {
Row() {
Text() {
SymbolSpan($r('sys.symbol.person'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor([$r('app.color.primary')])
}
.position({
left: 10,
top: 8
});
TextInput({ placeholder: '请输入手机号', text: this.mobile })
.width('80%')
.height(40)
.padding({ left: 40 })
.onChange((value) => {
this.mobile = value
})
}
Row() {
Text() {
SymbolSpan($r('sys.symbol.lock_fill'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor([$r('app.color.primary')])
}
.position({
left: 10,
top: 8
});
TextInput({ placeholder: '请输入密码', text: this.password })
.width('80%')
.height(40)
.padding({ left: 40 })
.onChange((value) => {
this.password = value
})
}
Button('登录')
.width('80%')
.height(40)
.fontColor($r('app.color.white'))
.backgroundColor($r('app.color.primary'))
.onClick(() => {
this.loginHandler()
})
}
.width("100%")
.justifyContent(FlexAlign.Center)
}
}
三、效果图展示
四、关键配置项
权限声明
在 module.json5 中添加网络权限:
"requestPermissions": [{
"name": "ohos.permission.INTERNET"
}]
封装核心价值:通过统一拦截器实现错误处理、日志记录、权限校验等横切关注点,提升代码复用率与可维护性。建议结合业务场景扩展重试机制、请求缓存等高级功能。
更多推荐


所有评论(0)