OpenHarmony开发者论坛

标题: 【闲谈鸿蒙三方库】网络库@ohos/axios [打印本页]

---

作者: 马迪    时间: 13 小时前
标题: 【闲谈OpenHarmony三方库】网络库@ohos/axios
[md]OpenHarmony应用开发离不开网络调用，虽然OpenHarmony系统自身提供了Network Kit可以实现发送Http/Https网络请求。但假如你是一位成名的web前端开发高手，早已熟练使用axios网络库，那么在OpenHarmony开发的全新舞台上，你将惊喜地发现，axios这位老伙伴依然与你并肩作战，让你能够用同样的流畅手法，轻松实现与后台服务的无缝对接。这无疑为OpenHarmony开发之旅增添了一份熟悉与惬意。

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

其主要特性包括：

- 基于Promise
- 支持请求和响应拦截器
- 支持自动转换request和response的数据
- 支持默认全局配置
- 支持代理设置
- 支持自定义https证书
- 支持证书锁定
- 支持上传下载文件，并获取进度


## 快速上手方法

#### 1.下载安装

```
ohpm install @ohos/axios
```

当前稳定版本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 全局默认设置

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

```

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';

```

#### 示例2 拦截器

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

```

// 添加请求拦截器

axios.interceptors.request.use((config:InternalAxiosRequestConfig)  => {

// 对请求数据做点什么

return config;

}, (error:AxiosError)  => {

// 对请求错误做些什么

return Promise.reject(error);

});

```

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

```

// 添加响应拦截器

axios.interceptors.response.use((response:AxiosResponse) => {

// 对响应数据做点什么

return response;

}, (error:AxiosError) => {

// 对响应错误做点什么

return Promise.reject(error);

});

```

#### 示例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) => {

//

})

```

#### 示例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));

})

```

#### 示例5 代理设置

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

```
axios<string, AxiosResponse<string>, null>({
    url: 'xxx',
    method: 'get',
    proxy:{
    host: 'xxx',
    port: xx,
    exclusionList: []
    }
}).then((res: AxiosResponse) => {
    //
}).catch((err: AxiosError) => {
    //
})
```

## 实现原理

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

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


## 局限性

由于底层基于Network Kit（http网络服务），当前三方库存在以下主要问题：

1.不支持立即取消未发送的网络请求。

2.不支持忽略https证书，只能自定义证书，或者使用系统默认证书。

3.不支持缓存http连接，并发请求性能较弱。

## 结束语

随着越来越多的鸿蒙应用上线，各种开源的闭源的，开发者自发的和大厂贡献的库也正在逐步涌现出来，也有一些早期的库已被淘汰。今年我将抽空帮大家基于HarmonyOS 5.0+试试水，根据实际效果和下载量帮大家筛选在[awesome-harmony-library](https://github.com/Madixin/awesome-harmony-library)，大家也帮忙Star下

```

```
[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5