共计 3682 个字符，预计需要花费 10 分钟才能阅读完成。
什么是 axios
上古浏览器页面在向服务器申请数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很敌对。并且咱们只是须要批改页面的局部数据，然而从服务器端发送的却是整个页面的数据，非常耗费网络资源。而咱们只是须要刷新页面的局部数据，并不心愿刷新整个页面。于是一种新的技术，异步网络申请 Ajax(Asynchronous JavaScript and XML) 随之产生，它能与后盾服务器进行大量数据交换，使网页实现异步更新。这意味着能够在不重载整个页面的状况下，对网页的某些局部进行更新。
然而因为浏览器中原生的 XMLHttpRequest API 较难应用，于是又有了更多用于实现 ajax 的 javascript 框架，比方咱们相熟的 jQuery、Dojo、YUI 等等。而现在一个叫 axios 的轻量框架逐渐怀才不遇，目前在 github 的战绩曾经达到了 Fork9.6k+ 和 Star94k+，它实质上也是对原生 XHR 的封装，只不过它是 Promise 的实现版本，合乎最新的 ES 标准，有以下特点：
● 从浏览器中创立 XMLHttpRequests
● 从 node.js 创立 http 申请
● 反对 Promise API
● 拦挡申请和响应
● 转换申请数据和响应数据
● 勾销申请
● 主动转换 JSON 数据
在 OpenHarmony 利用中应用 axios
咱们能够看到 axios 既能够在浏览器中应用，又能够在 Nodejs 中应用，而现在随着 OpenHarmony ArkUI 的倒退，axios 又有了新的用武之地，即在 OpenHarmony 规范零碎的利用中应用：可用于网络申请和上传下载文件，并齐全继承 axios 原生的用法和所有个性。
对，你没有看错，axios 的确是能够在 OpenHarmony 上应用了。上面简略介绍下，如何在 OpenHarmony 利用中应用 axios。
第一步：
在 OpenHarmony 规范零碎的利用中下载安装 OpenHarmony axios 三方组件。
npm install @ohos/axios –save
OpenHarmony npm 环境配置等更多内容，参考装置教程 如何装置 OpenHarmony npm 包。
（https://gitee.com/openharmony…）
第二步：
在页面中，引入 axios。
import axios from "@ohos/axios";
第三步：
axios 既能够当做函数间接应用发动异步申请，也能够当做对象，应用其 get/post 办法发动异步申请。
作为函数间接发动 post 申请，通过 promise 获取申请后果。
let url = 'http://www.xxx.xxx';
axios({
method: "post",
url: url,
data:{
catalogName: "doc-references",
language: "cn",
objectId: "js-apis-net-http-0000001168304341",
}
})
.then(res => {console.info('post result:' + JSON.stringify(res.data.value.breadUrl))
})
.catch(error => {console.info('post error!')
})
作为对象，应用其 get/post 办法发动异步申请
const test= axios.create({(baseURL:'http://xxxx'});
test.get('/xxxx').then(response=>{})
axios 拦截器
个别在应用 axios 时，会用到拦截器的性能，个别分为两种：申请拦截器、响应拦截器。
● 申请拦截器 在申请发送前进行必要操作解决，例如增加对立 cookie、申请体加验证、设置申请头等，相当于是对每个接口里雷同操作的一个封装；
● 响应拦截器 同理，响应拦截器也是如此性能，只是在申请失去响应之后，对响应体的一些解决，通常是数据对立解决等，也常来判断登录生效等。
axios 的拦截器作用十分大。axios 的拦截器分为申请拦截器跟响应拦截器，都是能够设置多个申请或者响应拦挡。每个拦截器都能够设置两个拦挡函数，一个为胜利拦挡，一个为失败拦挡。在调用 axios.request() 之后，申请的配置会先进入申请拦截器中，失常能够始终执行胜利拦挡函数，如果有异样会进入失败拦挡函数，并不会发动申请；调起申请响应返回后，会依据响应信息进入响应胜利拦挡函数或者响应失败拦挡函数。
举个例子
1. 增加申请拦截器
axios.interceptors.request.use(function (config) {
// 在发送申请之前做些什么
return config;
}, function (error) {
// 对申请谬误做些什么
return Promise.reject(error);
});
2. 增加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应谬误做点什么
return Promise.reject(error);
});axios 上传下载文件
应用 axios 还能够在 OpenHarmony 中上传和下载文件，并获取到上传和下载的进度。
上传文件：
import axios from '@ohos/axios'
import {FormData} from '@ohos/axios'
var formData = new FormData()
formData.append('file', 'internal://cache/blue.jpg')
// 发送申请
axios.post('http://www.xxx.com/upload', formData, {headers: { 'Content-Type': 'multipart/form-data'},
context: getContext(this),
onUploadProgress:(uploadedSize: number, total:number):void=> {console.info(Math.ceil(uploadedSize/total * 100) + '%');
},
}).then((res) => {console.info("result" + JSON.stringify(res.data));
}).catch(error => {console.error("error:" + JSON.stringify(error));
})
下载文件：
axios({
url: 'http://www.xxx.com/blue.jpg',
method: 'get',
context: getContext(this),
filePath: filePath ,
onDownloadProgress: (receivedSize: number, total:number):void=> {console.info(Math.ceil( receivedSize/total * 100) + '%');
},
}).then((res)=>{console.info("result:" + JSON.stringify(res.data));
}).catch((error)=>{=
console.error(t"error:" + JSON.stringify(error));
})
除以上个性之外，axios 的默认配置，勾销申请等个性都是能够在 OpenHarmony 上持续应用的哈。另外，从 npm 官网上，能够看到有 8000+ 的三方组件依赖 axios，当初 axios 反对 OpenHarmony 后，更多的三方组件也将能在 OpenHarmony 上跑起来。
如何移植 axios 到 OpenHarmony 上运行的？
介绍了这么多 axios 的用法，置信前端的 axios 老粉们曾经急不可待地去体验了吧。然而兴许你会好奇，axios 为啥能在 OpenHarmony 上运行？它不只是反对浏览器和 Nodejs 吗？
这块深刻解读的话，须要理解 axios 框架的实现原理。简略来说，ohos/axios 依赖开源社区 axios 三方组件，并依据 axios 现有的框架实现了 ohadapter，即在 OpenHarmony 中适配网络调用，对外裸露 axios 的原有对象，因而能够保障 axios 的 api 及个性都齐全继承。大家能够进一步到 openharmony-tpc 看下其源码的实现。
如下图，左边蓝色的是原生 axios 的开源社区，右边绿色的是 OpenHarmony axios 三方组件，仅仅是实现了一个 OpenHarmony 的适配模块，并未批改原生社区的一行代码。
总结
本期基于 OpenHarmony API9 的 axios 组件就为大家介绍到这，其源码已开源在了“https://gitee.com/openharmony…”，欢送大家应用和提 Issue。理解更多三方组件动静，请关注三方组件资源汇总，更多优良的组件等你来发现！