什么是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。理解更多三方组件动静，请关注三方组件资源汇总，更多优良的组件等你来发现！