OpenHarmony實戰開發——網絡組件axios可以在OpenHarmony上使用了

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

第二步：

在頁面中，引入axios。

import axios from "@ohos/axios";

第三步：

axios既可以當做函數直接使用發起異步請求，也可以當做對象，使用其get/post方法發起異步請求。

作為函數直接發起post請求，通過promise獲取請求結果。

let url = 'http://www.xxx.xxx';
axios({method: "post"undefinedurl: urlundefineddata:{catalogName: "doc-references"undefinedlanguage: "cn"undefinedobjectId: "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的攔截器作用非常大。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' }undefinedcontext: getContext(this)undefinedonUploadProgress:(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'undefinedmethod: 'get'undefinedcontext: getContext(this)undefinedfilePath: filePath undefinedonDownloadProgress:  (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的適配模塊，并未修改原生社區的一行代碼。