【HarmonyOS】基于Axios封装网络请求工具类

引言

在现代前端开发中,网络请求的封装是提升代码可维护性和复用性的关键。本文将介绍如何使用Axios库在ArkTS环境中封装一个通用的网络请求工具类Curl,并探讨其设计与实现。

技术选型

我们选择了@ohos/axios作为网络请求的基础库,因为它提供了强大的功能,如拦截器、请求和响应转换等。此外,结合项目的基础配置(如BASE_URLTIME_OUT),我们可以更好地管理网络请求的全局配置。

类结构设计

Curl

Curl类是整个封装的核心,负责创建Axios实例并设置请求和响应拦截器。通过构造函数初始化实例,并传入基础配置。

typescript 复制代码
class Curl {
  instance: AxiosInstance

  constructor(opt: CreateAxiosDefaults = { baseURL: BASE_URL, timeout: TIME_OUT }) {
    this.instance = axios.create(opt)
    this.setInterceptorsRequest()
    this.setInterceptorsResponse()
  }
}

拦截器设置

请求拦截器

在请求拦截器中,我们添加了用户认证信息到请求头中,确保每个请求都携带有效的Token。

typescript 复制代码
private setInterceptorsRequest() {
  this.instance.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
      const token = authUser.getUser()
      config.headers['Authorization'] = `Bearer ${token?.token}`
      return config
    },
    (err: AxiosError) => {
      return Promise.reject(err.message)
    }
  )
}

响应拦截器

响应拦截器用于处理响应数据和错误信息,统一返回格式或抛出异常。

typescript 复制代码
private setInterceptorsResponse() {
  this.instance.interceptors.response.use(
    (res: AxiosResponse) => {
      if (res.data.code === '1') {
        return res.data
      } else {
        return Promise.reject(res.data.message)
      }
    },
    (err: AxiosError) => {
      return Promise.reject(err.message)
    }
  )
}

请求方法封装

为了简化不同类型的HTTP请求,我们在Curl类中封装了常见的GET、POST、PUT和DELETE方法,并支持FormData上传。

typescript 复制代码
get<R, Q>(url: string, params?: Q): Promise<R> {
  return this.instance.get(url, params && { params })
}

post<R, Q>(url: string, data: Q): Promise<R> {
  return this.instance.post(url, data)
}

post_form<R, Q>(url: string, formData: Q): Promise<R> {
  return this.instance.postForm(url, formData, {
    headers: {
      'Content-Type': 'multipart/form'
    },
    context: getContext(this)
  })
}

put<R, Q>(url: string, data: Q): Promise<R> {
  return this.instance.put(url, data)
}

delete<R, Q>(url: string, data: Q): Promise<R> {
  return this.instance.delete(url, {
    data: data
  })
}

导出实例

最后,我们导出一个Curl实例,供其他模块使用。

typescript 复制代码
export const curl = new Curl()

完整代码

typescript 复制代码
import axios, {
  AxiosError,
  AxiosInstance,
  AxiosResponse,
  CreateAxiosDefaults,
  InternalAxiosRequestConfig
} from '@ohos/axios' // 导入axios及相关类型
import { BASE_URL, TIME_OUT } from '../../../../../Index' // 导入基础配置
import { authUser, logger } from '.' // 导入用户认证模块

class Curl {
  instance: AxiosInstance // 存储axios实例

  constructor(opt: CreateAxiosDefaults = { baseURL: BASE_URL, timeout: TIME_OUT }) { // 构造函数,初始化axios实例
    this.instance = axios.create(opt) // 创建axios实例
    this.setInterceptorsRequest() // 设置请求拦截器
    this.setInterceptorsResponse() // 设置响应拦截器
  }

  // 请求拦截器
  private setInterceptorsRequest() { // 设置请求拦截器方法
    this.instance.interceptors.request.use(// 使用请求拦截器
      (config: InternalAxiosRequestConfig) => { // 请求配置处理函数
        const token = authUser.getUser() // 获取用户Token
        config.headers['Authorization'] = `Bearer ${token?.token}` // 设置请求头Authorization
        return config // 返回配置
      },
      (err: AxiosError) => { // 请求错误处理函数
        return Promise.reject(err.message) // 拒绝请求并返回错误信息
      }
    )
  }

  // 响应拦截器
  private setInterceptorsResponse() { // 设置响应拦截器方法
    this.instance.interceptors.response.use(// 使用响应拦截器
      (res: AxiosResponse) => { // 响应数据处理函数
        if (res.data.code === '1') { // 判断响应码是否为成功
          return res.data // 返回响应数据
        } else { // 响应码不为成功
          return Promise.reject(res.data.message) // 拒绝响应并返回错误信息
        }
      },
      (err: AxiosError) => { // 响应错误处理函数
        return Promise.reject(err.message) // 拒绝响应并返回错误信息
      }
    )
  }

  // GET请求  获取
  get<R, Q>(url: string, params?: Q): Promise<R> { // GET请求方法
    return this.instance.get(url, params && { params }) // 发送GET请求
  }

  // POST请求 新增
  post<R, Q>(url: string, data: Q): Promise<R> { // POST请求方法
    return this.instance.post(url, data) // 发送POST请求
  }

  // FormData 上传请求 新增
  post_form<R, Q>(url: string, formData: Q): Promise<R> { // FormData上传方法
    return this.instance.postForm(url, formData, {
      // 发送FormData请求
      headers: {
        // 设置请求头
        'Content-Type': 'multipart/form' // 设置Content-Type为multipart/form
      },
      context: getContext(this) // 设置请求上下文
    })
  }

  // PUT请求 修改
  put<R, Q>(url: string, data: Q): Promise<R> { // PUT请求方法
    return this.instance.put(url, data) // 发送PUT请求
  }

  // delete请求 删除
  delete<R, Q>(url: string, data: Q): Promise<R> { // DELETE请求方法
    return this.instance.delete(url, {
      // 发送DELETE请求
      data: data // 设置请求体数据
    })
  }
}

export const curl = new Curl() // 导出Curl实例

结论

通过上述设计与实现,我们成功地封装了一个高效且易于使用的网络请求工具类Curl。这种封装不仅提高了代码的可读性和可维护性,还为后续的功能扩展打下了坚实的基础。

相关推荐
程序员潘Sir19 小时前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
萌虎不虎19 小时前
【鸿蒙(openHarmony)自定义音频播放器的开发使用说明】
华为·音视频·harmonyos
李洋-蛟龙腾飞公司19 小时前
HarmonyOSAI编程万能卡片生成(一)
华为·ai编程·harmonyos
HarmonyOS_SDK21 小时前
打破场景边界,支付宝联合实况窗提供全新出行服务体验
harmonyos
安卓开发者21 小时前
鸿蒙NEXT应用数据持久化全面解析:从用户首选项到分布式数据库
数据库·分布式·harmonyos
森之鸟1 天前
开发中使用——鸿蒙播放本地mp3文件
华为·harmonyos
前端世界1 天前
HarmonyOS 数据处理性能优化:算法 + 异步 + 分布式实战
算法·性能优化·harmonyos
HarmonyOS小助手1 天前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
爱笑的眼睛111 天前
HarmonyOS 应用开发深入浅出:基于 Stage 模型与声明式 UI 的现代化状态管理实践
华为·harmonyos
爱笑的眼睛111 天前
HarmonyOS 应用开发深度解析:掌握 ArkTS 声明式 UI 与现代化状态管理
华为·harmonyos