【闲谈鸿蒙三方库】网络库@ohos/axios 原创

马迪迪迪
发布于 2025-2-5 09:17
438浏览
0收藏

鸿蒙应用开发离不开网络调用,虽然鸿蒙系统自身提供了Network Kit和Remote Communication Kit可以实现发送Http/Https网络请求。但假如你是一位成名的web前端开发高手,早已熟练使用axios网络库,那么在鸿蒙开发的全新舞台上,你将惊喜地发现,axios这位老伙伴依然与你并肩作战,让你能够用同样的流畅手法,轻松实现与后台服务的无缝对接。这无疑为鸿蒙开发之旅增添了一份熟悉与惬意。

Axios是一个非常流行javascript网络库,可以运行node.js和浏览器中,深受广大前端开发者的喜爱。@ohos/axios库基于Axios v1.3.4版本进行适配,使其可以运行在OpenHarmony/HarmonyOS里,并沿用其现有用法和特性。
其主要特性包括:

  • 基于Promise
  • 支持请求和响应拦截器
  • 支持自动转换request和response的数据
  • 支持默认全局配置
  • 支持代理设置
  • 支持自定义https证书
  • 支持证书锁定
  • 支持上传下载文件,并获取进度
    【闲谈鸿蒙三方库】网络库@ohos/axios-鸿蒙开发者社区

快速上手方法

1.下载安装

ohpm install @ohos/axios
  • 1.

当前稳定版本2.2.4

2.权限配置

因核心功能涉及网络下载,需要添加ohos.permission.INTERNET的权限。

3.基础网络请求

// 发送一个get请求
axios<string, AxiosResponse<string>, null>({
  method: "get",
  url: 'https://www.xxx.com/info'
}).then((res: AxiosResponse) => {
  console.info('result:' + JSON.stringify(res.data));
}).catch((error: AxiosError) => {
  console.error(error.message);
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

更多功能展示

示例1 全局默认设置

通过默认配置,可以将设置应用于每个请求。

axios.defaults.baseURL = 'https://www.xxx.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  • 1.
  • 2.
  • 3.

示例2 拦截器

请求拦截器,可以在发送请求之前,对请求进行统一处理,如添加请求头、设置请求参数、处理请求的 loading 状态等。

// 添加请求拦截器
axios.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

响应拦截器在收到响应后,对响应数据进行统一处理,如检查响应状态码,根据不同的状态码进行不同的操作,如处理错误信息、更新 token 等。也可以对响应数据进行转换或提取。

// 添加响应拦截器
axios.interceptors.response.use((response:AxiosResponse)=> {
  // 对响应数据做点什么
  return response;
}, (error:AxiosError)=> {
  // 对响应错误做点什么
  return Promise.reject(error);
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

示例3 自定义客户端证书

为增强网络安全性,部分企业和应用使用自己私有的证书进行通信。

axios<infoModel, AxiosResponse<infoModel>, null>({
url: 'https://www.xxx.com/xx',
method: 'get',
caPath: '', //ca证书路径
clientCert: {
    certPath: '', //客户端证书路径
    certType: 'p12', // 客户端证书类型,包括pem、der、p12三种
    keyPath: '', //客户端私钥路径
    keyPasswd: '' // 密码
    }
}).then((res: AxiosResponse) => {
// 
}).catch((err: AxiosError) => {
//
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

示例4 上传下载文件

上传下载文件,并获取进度

let formData = new FormData()
formData.append('file', 'internal://cache/blue.jpg')
// formData.append('file', cacheDir + '/hello.txt'); uri支持传入沙箱路径

// 上传本地文件
axios.post<string, AxiosResponse<string>, FormData>('https://www.xxx.com/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  context: getContext(this),
  onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
    console.info(progressEvent && progressEvent.loaded && progressEvent.total ? Math.ceil(progressEvent.loaded / progressEvent.total * 100) + '%' : '0%');
  },
}).then((res: AxiosResponse<string>) => {
  console.info("result" + JSON.stringify(res.data));
}).catch((err: AxiosError) => {
  console.error("error:" + JSON.stringify(err));
})

// 下载文件到本地
axios({
  url: 'https://www.xxx.com/blue.jpg',
  method: 'get',
  filePath: filePath ,
  onDownloadProgress: (progressEvent: AxiosProgressEvent): void => {
    console.info("progress: " + progressEvent && progressEvent.loaded && progressEvent.total ? Math.ceil(progressEvent.loaded / progressEvent.total * 100) : 0)
  }
}).then((res)=>{
  console.info("result: " + JSON.stringify(res.data));
}).catch((error)=>{
  console.error("error:" + JSON.stringify(error));
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

示例5 代理设置

通过代理服务器访问网络。

axios<string, AxiosResponse<string>, null>({
    url: 'xxx',
    method: 'get',
    proxy:{
    host: 'xxx',
    port: xx,
    exclusionList: []
    }
}).then((res: AxiosResponse) => {
    // 
}).catch((err: AxiosError) => {
    //
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

实现原理

原生axios网络库在设计的时候,由于考虑到既可以在浏览器下执行,又可以在Node.js环境上执行,因此在设计的时候采用了适配器,默认根据运行环境来选择adapter。即浏览器环境中使用基于XMLHttpRequest(XHR)的adapter,即xhr.js中定义的适配器,而在Node.js环境中,默认使用基于http模块的adapter,即http.js中定义的适配器。

由于该库使用了良好的扩展性,因此@ohos/axios库的实现非常简单,即在现有的机制上扩展了一个ohosAdapter,内部调用鸿蒙内部的Network Kit完成网络请求,对外给应用开发者保留了同样的使用方式。
【闲谈鸿蒙三方库】网络库@ohos/axios-鸿蒙开发者社区【闲谈鸿蒙三方库】网络库@ohos/axios-鸿蒙开发者社区

局限性

由于底层基于Network Kit(http网络服务),当前三方库存在以下主要问题:
1.不支持立即取消未发送的网络请求。
2.不支持忽略https证书,只能自定义证书,或者使用系统默认证书。
3.不支持缓存http连接,并发请求性能较弱。

结束语

随着越来越多的鸿蒙应用上线,各种开源的闭源的,开发者自发的和大厂贡献的库也正在逐步涌现出来,同时也有一些早期的库已被淘汰。今年我将抽空帮大家基于HarmonyOS 5.0+试试水,根据实际效果和下载量筛选在awesome-harmony-library,帮助大家快速找到合适的三方库,也请大家也帮忙Star下这个仓库:)

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏
回复
举报


回复
    相关推荐