菜鸟-创作你的创作

鸿蒙中Axios数据请求的封装和配置方法

lichongyang

下面给你整理一份 《HarmonyOS Axios 数据请求封装与配置方法》，适合在 HarmonyOS 5/6 前端项目中进行统一网络请求管理，包含封装思路、示例代码和最佳实践。

HarmonyOS Axios 数据请求封装与配置方法

在 HarmonyOS 的前端开发中（使用 ArkUI / JavaScript 或 TypeScript），通常需要访问后台 API。axios 是最常用的 HTTP 请求库，配合封装可统一处理：

一、安装 Axios

如果你的 HarmonyOS JS/TS 项目使用 npm 管理依赖：

npm install axios

在 DevEco Studio 项目中，也可以通过 JS 模块依赖 导入。

二、创建 Axios 实例

统一创建一个 axios 实例，方便全局配置：

// request.js
import axios from 'axios';

// 创建 axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 基础路径
  timeout: 10000, // 请求超时 10 秒
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可在此统一加 token
    const token = globalThis.token || '';
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 可统一处理响应数据
    if (response.data.code !== 200) {
      // 根据 code 异常处理
      console.error('接口异常', response.data.message);
      return Promise.reject(response.data);
    }
    return response.data; // 直接返回接口 data
  },
  error => {
    console.error('请求失败', error.message);
    return Promise.reject(error);
  }
);

export default service;

三、封装请求方法

统一封装 GET / POST / PUT / DELETE 方法：

// api.js
import request from './request.js';

export const getUserInfo = (id) => {
  return request.get(`/user/${id}`);
};

export const login = (params) => {
  return request.post('/auth/login', params);
};

export const updateProfile = (id, params) => {
  return request.put(`/user/${id}`, params);
};

export const deleteUser = (id) => {
  return request.delete(`/user/${id}`);
};

优点：

四、在 HarmonyOS 页面中调用

假设你的 AbilitySlice 页面：

import { login, getUserInfo } from '../api/api.js';

export default class LoginSlice extends AbilitySlice {

  onStart() {
    super.onStart();
    // 登录示例
    login({ username: 'test', password: '123456' })
      .then(res => {
        console.log('登录成功', res);
      })
      .catch(err => {
        console.error('登录失败', err);
      });

    // 获取用户信息
    getUserInfo(123)
      .then(res => console.log('用户信息', res))
      .catch(err => console.error(err));
  }
}

特点：

五、可选增强功能

  1. 统一处理 Loading
    • 请求开始：显示 loading
    • 请求结束：隐藏 loading
    service.interceptors.request.use(config => { showLoading(); return config; }); service.interceptors.response.use(response => { hideLoading(); return response; }, error => { hideLoading(); return Promise.reject(error); });
  2. 全局错误提示
    • 可用 toast 或弹窗提示接口错误信息
  3. 请求重试
    • 对于网络错误或超时可自动重试
    • 可通过 axios-retry 插件或自定义拦截器实现
  4. 跨域 / 本地代理
    • HarmonyOS JS 前端开发可通过 webpack 或 vite 配置 proxy

六、示例 async/await 使用

async function fetchUser() {
  try {
    const data = await getUserInfo(123);
    console.log('用户信息', data);
  } catch (err) {
    console.error('获取用户信息失败', err);
  }
}

七、总结

退出移动版