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的适配模块,并未修改原生社区的一行代码。

为了帮助到大家能够更有效的学习OpenHarmony 开发的内容,下面特别准备了一些相关的参考学习资料:

OpenHarmony 开发环境搭建:https://qr18.cn/CgxrRy

《OpenHarmony源码解析》:https://qr18.cn/CgxrRy

  • 搭建开发环境
  • Windows 开发环境的搭建
  • Ubuntu 开发环境搭建
  • Linux 与 Windows 之间的文件共享
  • ……

系统架构分析:https://qr18.cn/CgxrRy

  • 构建子系统
  • 启动流程
  • 子系统
  • 分布式任务调度子系统
  • 分布式通信子系统
  • 驱动子系统
  • ……

OpenHarmony 设备开发学习手册:https://qr18.cn/CgxrRy

在这里插入图片描述

OpenHarmony面试题(内含参考答案):https://qr18.cn/CgxrRy

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/14910.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高效写代码java-推荐插件1(格式转化 ConverterX )-日后待更新

ConverterX 主要功能:格式转化 字符串格式转换 日期转换 Json格式转义 字符格式 快捷键 ctrl shiftS Upper(CODEEASE)字符串全部变成大写Lower(codeease)字符串全部变成小写Camel(codeEase)字符串变成小驼峰ClassCaemel(CodeEase)字符串变成大驼峰UnderlineUpper(CODE_EAS…

项目管理:Jira,禅道,GitHub Issues对比

Jira、禅道(ZenTao)和GitHub Issues都是项目管理工具,但它们在功能、适用场景和特性上有所不同。以下是它们之间的对比: 功能: Jira:是一款强大的项目管理工具,适用于各种项目,尤其…

Vue3组件间通信通过回调函数传递数据

Vue3组件间通信通过回调函数传递数据 一、前言1、使用场景2、实现方法1. 父组件中定义回调方法2. 子组件中触发回调方法 二、结论 一、前言 在 Vue 3 中,组件之间的通信是一个重要的主题。在许多情况下,你可能需要从子组件向父组件传递数据或触发父组件…

python实用系列:按顺序重命名文件

啊,好久没更博客了,今天偶然想换个桌面壁纸,于是上网搜了两个比较满意的桌面壁纸,都是压缩包: 当我想要给他们放到我的桌面壁纸文件里的时候患了难,因为他们的名字有相同的: anime文件夹里边&a…

揭秘!亚马逊、Vinted卖家如何借助自养号测评实现爆单?

​作为一名跨境卖家,你一定梦想着能够在亚马逊上实现爆单,让产品火爆销售。下面就分享五个秘诀,帮助你实现这个梦想: 1. 优质产品:首先,确保你的产品质量优秀,能够满足消费者的需求。品质好的产…

基于Matlab使用BP神经网络进行电力系统短期负荷预测

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 电力系统的短期负荷预测对于电力调度和能源管理具有至关重要的作用。通过准确地预测电力负荷&…

【产品经理】输出

引言:        在最近频繁的产品管理职位面试中,我深刻体会到了作为产品经理需要的不仅仅是对市场和技术的敏锐洞察,更多的是在复杂多变的环境中,如何运用沟通、领导力和决策能力来引导产品从概念走向市场。这一系列博客将分享…

CAN网络管理(TJA1145如何实现MCU的休眠唤醒)

节点唤醒方式 本地唤醒: 唤醒源来源于自身模块,比如常说的KL15,控制器由KL15线供电,即只能在钥匙置于“ACC”或者“ON”档时运行软件和维持CAN通信 对于正在运行的CPU软件,无论它处在什么状态,只要Hardwa…

深度学习模型keras第二十五讲:使用KerasNLP从零开始预训练Transformer模型

1、KerasNPL预训练Transformer模型概念 使用KerasNLP来预训练一个Transformer模型涉及多个步骤。由于Keras本身并不直接提供NLP的预训练模型或工具集,我们通常需要结合像TensorFlow Hub、Hugging Face的Transformers库或自定义的Keras层来实现。 以下是一个简化的…

Android Baidu地图SDK只展示蓝背景,没有绘制内容问题解决

背景 项目里接入了Baidu地图SDK,用于展示信息、选点。 在一个新的Activity中,引入了TextureMapView,用于地图展示。 选点过程有两个页面。 A页面中有一个不能滑动的地图,只是用来展示,没有其他任何操作。 点击A页…

Plesk中如何移除之前添加的域名

我这边想要移除我之前绑定到主机的域名,但是不知道如何在主机上面进行移除,由于我使用的Hostease的Windows虚拟主机产品默认带普通用户权限的Plesk面板,但是不知道如何在Plesk上操作移除域名,因为也是对于Hostease主机产品不是很了…

java单元测试:JUnit断言库

JUnit断言库提供了一组用于验证测试结果的工具。这些断言方法帮助开发人员在单元测试中明确表达预期结果,并在实际结果与预期结果不符时报告失败。 1. JUnit中的断言 断言用于验证测试的预期结果。JUnit 5(Jupiter)提供了一组静态方法&…

获取和设置代理的动态IP的方式

引言 大家好,今天我来给大家分享一下如何通过编程技术来获取和设置代理的动态IP。在网络世界中,代理和动态IP是非常常见的概念,尤其对于需要大规模访问网站或者需要隐藏真实IP地址的应用程序来说,更是必不可少的工具。接下来&…

【精品】【算法实战】每日一题:如何用Python实现给定整数序列中寻找最小长度窗口以包含所有不同元素的算法?

问题: 如何用Python实现给定整数序列中寻找最小长度窗口以包含所有不同元素的算法? 核心思路 核心思路是利用双端队列(作为滑动窗口)来找到一个满足特定条件的最小长度子序列。算法遍历给定的序列,对于每个新数据点…

【Spring】Spring框架对RESTFul风格的支持

1、简介 Spring框架对RESTful风格的支持主要体现在Spring MVC和Spring Boot等模块中。RESTful(Representational State Transfer,表述层资源状态转移)是一种软件架构风格,它强调资源(通常是网络上的信息)的…

Java方法的基本用法

Java方法的基本用法 前言一、什么是方法方法存在的意义示例 二、方法定义语法基本语法代码示例注意事项 三、方法调用的执行过程基本规则代码示例计算两个整数相加计算 1! 2! 3! 4! 5! 四、实参和形参的关系代码示例交换两个整型变量原因分析解决办法 五、没有返回值的方法…

初识java——javaSE (6)接口的实现——比较器与深拷贝,浅拷贝

文章目录 前言一 比较器1.1 关于两个对象的比较1.2 Comparable接口:1.3 Arrays.sort方法的实现1.4 比较器的实现Comparator接口 二 深拷贝与浅拷贝2.1 浅拷贝:Cloneable接口:clone方法:实现拷贝:浅拷贝: 2.…

Python3 笔记:Python的所有关键字

查看Python的关键字首先需要用import导入keyword模块 import keyword # 查看Python的所有关键字,先用import导入keyword模块 print(keyword.kwlist) 运行结果: [False, None, True, and, as, assert, async, await, break, class, continue, def, …

MQ如何保证消息不丢失

MQ如何保证消息不丢失 问题分析具体分析及解决方案RabbitMQ生产者RabbitMQ配置消费者 KafkaKafka配置消费者 问题分析 从Kafka和RabbitMQ进行分析,MQ消息丢失的情况有生产者推送消息时数据丢失,MQ中间件宕机情况下数据丢失,消费者消费时消息…

GoLand map中的并发问题——为什么会造成并发问题?该怎么解决?

GoLand map中的并发问题——为什么会造成并发问题?该怎么解决? 问题提出原因解析具体原因竞态检测器 如何解决并发问题呢?方法一 : 使用sync.Mutex方法二: 使用sync.Map我们首先了解一下sync.Map的常用方法&#xff1a…