什么是axios

上古瀏覽器頁面在向服務(wù)器請(qǐng)求數(shù)據(jù)時(shí)，因?yàn)榉祷氐氖钦麄€(gè)頁面的數(shù)據(jù)，頁面都會(huì)強(qiáng)制刷新一下，這對(duì)于用戶來講并不是很友好。并且我們只是需要修改頁面的部分?jǐn)?shù)據(jù)，但是從服務(wù)器端發(fā)送的卻是整個(gè)頁面的數(shù)據(jù)，十分消耗網(wǎng)絡(luò)資源。而我們只是需要刷新頁面的部分?jǐn)?shù)據(jù)，并不希望刷新整個(gè)頁面。于是一種新的技術(shù)，異步網(wǎng)絡(luò)請(qǐng)求Ajax(Asynchronous JavaScript and XML)隨之產(chǎn)生，它能與后臺(tái)服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重載整個(gè)頁面的情況下，對(duì)網(wǎng)頁的某些部分進(jìn)行更新。

然而由于瀏覽器中原生的XMLHttpRequest API較難使用，于是又有了更多用于實(shí)現(xiàn)ajax的javascript框架，比如我們熟悉的jQuery、Dojo、YUI等等。而如今一個(gè)叫axios的輕量框架逐步脫穎而出，目前在github的戰(zhàn)績(jī)已經(jīng)達(dá)到了Fork9.6k+和Star94k+，它本質(zhì)上也是對(duì)原生XHR的封裝，只不過它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范，有以下特點(diǎn)：

● 從瀏覽器中創(chuàng)建 XMLHttpRequests

● 從 node.js 創(chuàng)建 http 請(qǐng)求

● 支持 Promise API

● 攔截請(qǐng)求和響應(yīng)

● 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)

● 取消請(qǐng)求

● 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)

在OpenHarmony應(yīng)用中使用axios

我們可以看到axios既可以在瀏覽器中使用，又可以在Nodejs中使用，而如今隨著OpenHarmony ArkUI的發(fā)展，axios又有了新的用武之地，即在OpenHarmony標(biāo)準(zhǔn)系統(tǒng)的應(yīng)用中使用：可用于網(wǎng)絡(luò)請(qǐng)求和上傳下載文件，并完全繼承axios原生的用法和所有特性。

對(duì)，你沒有看錯(cuò)，axios確實(shí)是可以在OpenHarmony上使用了。下面簡(jiǎn)單介紹下，如何在OpenHarmony應(yīng)用中使用axios。

第一步：

在OpenHarmony標(biāo)準(zhǔn)系統(tǒng)的應(yīng)用中下載安裝OpenHarmony axios三方組件。

npm install @ohos/axios –save

OpenHarmony npm環(huán)境配置等更多內(nèi)容，參考安裝教程 如何安裝OpenHarmony npm包。

（https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md）

第二步：

在頁面中，引入axios。

import axios from "@ohos/axios";

第三步：

axios既可以當(dāng)做函數(shù)直接使用發(fā)起異步請(qǐng)求，也可以當(dāng)做對(duì)象，使用其get/post方法發(fā)起異步請(qǐng)求

作為函數(shù)直接發(fā)起post請(qǐng)求，通過promise獲取請(qǐng)求結(jié)果。

    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!')})

作為對(duì)象，使用其get/post方法發(fā)起異步請(qǐng)求

const test= axios.create({(                            baseURL:'http://xxxx'});test.get('/xxxx').then(response=>{})

axios攔截器

一般在使用axios時(shí)，會(huì)用到攔截器的功能，一般分為兩種：請(qǐng)求攔截器、響應(yīng)攔截器。

● 請(qǐng)求攔截器 在請(qǐng)求發(fā)送前進(jìn)行必要操作處理，例如添加統(tǒng)一cookie、請(qǐng)求體加驗(yàn)證、設(shè)置請(qǐng)求頭等，相當(dāng)于是對(duì)每個(gè)接口里相同操作的一個(gè)封裝；

● 響應(yīng)攔截器 同理，響應(yīng)攔截器也是如此功能，只是在請(qǐng)求得到響應(yīng)之后，對(duì)響應(yīng)體的一些處理，通常是數(shù)據(jù)統(tǒng)一處理等，也常來判斷登錄失效等。

axios的攔截器作用非常大。axios的攔截器分為請(qǐng)求攔截器跟響應(yīng)攔截器，都是可以設(shè)置多個(gè)請(qǐng)求或者響應(yīng)攔截。每個(gè)攔截器都可以設(shè)置兩個(gè)攔截函數(shù)，一個(gè)為成功攔截，一個(gè)為失敗攔截。在調(diào)用axios.request()之后，請(qǐng)求的配置會(huì)先進(jìn)入請(qǐng)求攔截器中，正常可以一直執(zhí)行成功攔截函數(shù)，如果有異常會(huì)進(jìn)入失敗攔截函數(shù)，并不會(huì)發(fā)起請(qǐng)求；調(diào)起請(qǐng)求響應(yīng)返回后，會(huì)根據(jù)響應(yīng)信息進(jìn)入響應(yīng)成功攔截函數(shù)或者響應(yīng)失敗攔截函數(shù)。

舉個(gè)例子

1.添加請(qǐng)求攔截器

axios.interceptors.request.use(function (config) {    // 在發(fā)送請(qǐng)求之前做些什么    return config;  }, function (error) {    // 對(duì)請(qǐng)求錯(cuò)誤做些什么    return Promise.reject(error);});

2.添加響應(yīng)攔截器

axios.interceptors.response.use(function (response) {    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么    return response;  }, function (error) {    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么    return Promise.reject(error);});

axios上傳下載文件

使用axios還可以在OpenHarmony中上傳和下載文件，并獲取到上傳和下載的進(jìn)度。

上傳文件：

import  axios from '@ohos/axios'import { FormData } from '@ohos/axios'
var formData = new FormData()formData.append('file', 'internal://cache/blue.jpg')
// 發(fā)送請(qǐng)求axios.post('http://www.xxx.com/upload', formData, {   headers: { 'Content-Type': 'multipart/form-data' },   context: getContext(this),   onUploadProgress 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的默認(rèn)配置，取消請(qǐng)求等特性都是可以在OpenHarmony上繼續(xù)使用的哈。另外，從npm官網(wǎng)上，可以看到有8000+的三方組件依賴axios，現(xiàn)在axios支持OpenHarmony后，更多的三方組件也將能在OpenHarmony上跑起來。

如何移植axios到OpenHarmony上運(yùn)行的？

介紹了這么多axios的用法，相信前端的axios老粉們已經(jīng)迫不及待地去體驗(yàn)了吧。但是也許你會(huì)好奇，axios為啥能在OpenHarmony上運(yùn)行？它不只是支持瀏覽器和Nodejs嗎？

這塊深入解讀的話，需要了解axios框架的實(shí)現(xiàn)原理。簡(jiǎn)單來說，ohos/axios依賴開源社區(qū)axios三方組件，并根據(jù)axios現(xiàn)有的框架實(shí)現(xiàn)了ohadapter，即在OpenHarmony中適配網(wǎng)絡(luò)調(diào)用，對(duì)外暴露axios的原有對(duì)象，因此可以保障axios的api及特性都完全繼承。大家可以進(jìn)一步到openharmony-tpc看下其源碼的實(shí)現(xiàn)。

如下圖，右邊藍(lán)色的是原生axios的開源社區(qū)，左邊綠色的是OpenHarmony axios三方組件，僅僅是實(shí)現(xiàn)了一個(gè)OpenHarmony的適配模塊，并未修改原生社區(qū)的一行代碼。

總結(jié)

本期基于OpenHarmony API9的axios組件就為大家介紹到這，其源碼已開源在了“https://gitee.com/openharmony-sig/axios”，歡迎大家使用和提Issue。了解更多三方組件動(dòng)態(tài)，請(qǐng)關(guān)注三方組件資源匯總，更多優(yōu)秀的組件等你來發(fā)現(xiàn)！