一、基础封装流程**
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"
}]

封装核心价值:通过统一拦截器实现错误处理、日志记录、权限校验等横切关注点,提升代码复用率与可维护性。建议结合业务场景扩展重试机制、请求缓存等高级功能。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐