前言导读

在HarmonyOS NEXT开发中,我们都会遇到有做网络请求的情况,我们可以使用原生的http 也可以使用rcp。但是那些写法都

太原始了。对新手也不是很友好需要自己做大量封装工作,那么有没有好用的三方库呢,是有的axios 我们今天就分享一下axios的

一些使用方法

使用@ohos/axios进行网络请求的完整流程如下:

一、环境配置

  1. 安装三方库
bashCopy Code



ohpm install @ohos/axios
  1. 配置网络权限
    在module.json5中添加:
jsonCopy Code"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

二、基础封装方法

  1. 创建实例配置
import axios from '@ohos/axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'custom-value'}
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 可添加token等通用参数
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response => {
  return response.data
}, error => {
  return Promise.reject(error)
})

export default instance

已完成

核心封装包含基础URL配置和拦截器处理36。

三、请求方法示例

  1. GET请求
typescriptCopy Codeasync function fetchData() {
  try {
    const res = await instance.get('/api/data')
    console.log(res.data)
  } catch (err) {
    console.error('请求失败:', err)
  }
}
  1. POST请求
typescriptCopy Codeasync function submitData(params: object) {
  return instance.post('/api/submit', params)
}

四、文件上传方案

针对阿里云OSS等文件上传场景:

typescriptCopy Codeconst uploadFile = (fileUri: string) => {
  const formData = new FormData()
  formData.append('file', {
    uri: fileUri,
    type: 'image/jpeg',
    name: 'upload.jpg'
  })

  return instance.put('/upload', formData, {
    headers: {'Content-Type': 'multipart/form-data'}
  })
}

需注意鸿蒙平台的文件路径处理方式4。

五、最佳实践建议

  1. 统一错误处理机制
  2. 接口地址集中管理
  3. 请求取消功能实现
  4. 类型声明文件补充
Logo

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

更多推荐