鸿蒙 Axios工具类封装

飞露

486人浏览 · 2025-11-20 15:01:11

飞露 · 2025-11-20 15:01:11 发布

Axios ，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。本库基于Axios 原库v1.3.4版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

OpenHarmony三方库中心仓编辑https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios

一、安装Axios

ohpm install @ohos/axios

或者直接在oh-package.json5中添加如下配置

二、网络权限配置

找到module.json5文件，需要添加ohos.permission.INTERNET

三、创建axios实例对象

export  const axiosInstance =axios.create({
  baseURL:"",//模拟的后端数据请求
  timeout:10000, //请求超时时间，可选
  // headers: {'X-Custom-Header': 'foobar'} //请求头，可选
})

四、请求拦截器，在请求发送前对配置统一处理

axiosInstance.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
 
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

五、响应拦截器，统一处理响应数据和错误

axiosInstance.interceptors.response.use((response:AxiosResponse)=> {
 
  // 对响应数据做点什么
  return response;
}, (error:AxiosError)=> {
  // 对响应错误做点什么
  return Promise.reject(error);
});

六、封装并导出自定义请求，提供统一调用接口

export class AxiosUtil{
  static get<T>(url:string,params?:object):Promise<T>{
    return axiosInstance.get<null,T>(url,{params})
  }
  static  post<T>(url:string,data?:object):Promise<T>{
    return axiosInstance.post<null,T>(url,data)
  }
  static  put<T>(url:string,data?:object):Promise<T>{
    return axiosInstance.put<null,T>(url,{data})
  }
  static  delete<T>(url:string,data?:object):Promise<T>{
    return axiosInstance.delete<null,T>(url,data)
  }
}

不多废话，直接完整代码

import axios,{InternalAxiosRequestConfig,AxiosError,AxiosResponse} from '@ohos/axios'
 
//1.axios实例对象
export  const axiosInstance =axios.create({
  baseURL:"",//模拟的后端数据请求
  timeout:10000, //请求超时时间，可选
  // headers: {'X-Custom-Header': 'foobar'} //请求头，可选
})
 
//2.添加请求拦截器,在请求发送前对配置进行统一处理
axiosInstance.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
 
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
 
//定义后端标准返回格式的类型接口(根据需要可选)
export interface HttpRes<T>{
  code:number
  message:string
  data:T
}
//优化
export type  ResType<T> =AxiosResponse<HttpRes<T>>
 
//3.添加响应拦截器,统一处理响应数据和错误
axiosInstance.interceptors.response.use((response:AxiosResponse)=> {
 
  // 对响应数据做点什么
  return response;
}, (error:AxiosError)=> {
  // 对响应错误做点什么
  return Promise.reject(error);
});
 
//4.封装并导出自定义请求
export class AxiosUtil{
  static get<T>(url:string,params?:object):Promise<ResType<T>>{
    return axiosInstance.get<null,ResType<T>>(url,{params})
  }
  static  post<T>(url:string,data?:object):Promise<ResType<T>>{
    return axiosInstance.post<null,ResType<T>>(url,data)
  }
  static  put<T>(url:string,data?:object):Promise<ResType<T>>{
    return axiosInstance.put<null,ResType<T>>(url,{data})
  }
  static  delete<T>(url:string,data?:object):Promise<ResType<T>>{
    return axiosInstance.delete<null,ResType<T>>(url,data)
  }
}

测试代码

 
 
 @State inf: Inf[] = [] //Inf接口自己定义
 
  async getData() {
    try {
      const res = await AxiosUtil.get<Inf[]>("http://192.168.1.59:9999/inf/init")
      this.inf = res.data.data
    } catch (e) {
      console.log(e, "失败")
 
    }
  }
 
  aboutToAppear(): void {
    this.getData()
  }