什么是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包。

（gitee.com/openharmony… ）

第二步：

在页面中，引进axios。

import axios from "@ohos/axios";

第三步：

axios既能够作为函数直接运用建议异步恳求，也能够作为目标，运用其get/post办法建议异步恳求。

作为函数直接建议post恳求，通过promise获取恳求成果。

    let url = 'http://www.xxx.xxx';
    axios({
      method: "post"undefined
      url: urlundefined
      data:{
        catalogName: "doc-references"undefined
        language: "cn"undefined
        objectId: "js-apis-net-http-0000001168304341"undefined
      }
    })
      .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能够在OpenHarmony上运用了

axios的阻拦器作用非常大。axios的阻拦器分为恳求阻拦器跟呼应阻拦器，都是能够设置多个恳求或者呼应阻拦。每个阻拦器都能够设置两个阻拦函数，一个为成功阻拦，一个为失利阻拦。在调用axios.request()之后，恳求的装备会先进入恳求阻拦器中，正常能够一直执行成功阻拦函数，如果有异常会进入失利阻拦函数，并不会建议恳求；调起恳求呼应返回后，会依据呼应信息进入呼应成功阻拦函数或者呼应失利阻拦函数。

举个比如

1.增加恳求阻拦器

axios.interceptors.request.use(function (config) {
    // 在发送恳求之前做些什么
    return config;
  }undefined function (error) {
    // 对恳求错误做些什么
    return Promise.reject(error);
  });

2.增加呼应阻拦器

axios.interceptors.response.use(function (response) {
    // 对呼应数据做点什么
    return response;
  }undefined 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'undefined 'internal://cache/blue.jpg')
// 发送恳求
axios.post('http://www.xxx.com/upload'undefined formDataundefined {
   headers: { 'Content-Type': 'multipart/form-data' }undefined
   context: getContext(this)undefined
   onUploadProgress:(uploadedSize: numberundefined total:number):void=> {
      console.info(Math.ceil(uploadedSize/total * 100) + '%');
   }undefined
}).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'undefined
   method: 'get'undefined
   context: getContext(this)undefined
   filePath: filePath undefined
   onDownloadProgress:  (receivedSize: numberundefined total:number):void=> {
       console.info(Math.ceil( receivedSize/total * 100 ) + '%');
   }undefined
   }).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的适配模块，并未修正原生社区的一行代码。

网络组件axios能够在OpenHarmony上运用了

总结

本期根据OpenHarmony API9的axios组件就为我们介绍到这，其源码已开源在了“gitee.com/openharmony… ，欢迎我们运用和提Issue。了解更多三方组件动态，请关注三方组件资源汇总，更多优异的组件等你来发现！

网络组件axios能够在OpenHarmony上运用了