【HarmonyOS 4.0】网络请求 - axios

news2024/11/15 1:25:51
  1. axios 相当于鸿蒙应用项目的一个第三方库,鸿蒙应用项目使用ohpm管理(包括安装,卸载等)第三方库。除了axios,还有很多其他的第三方库可供开发者使用,所有的第三方库都收录在OpenHarmony三方库中心仓。

1. 安装 axios 库

1.1 查看 ohpm 安装目录
1.2 把 ohpm 安装目录添加到电脑Path环境变量中
1.3 安装 axios:ohpm i @ohos/axios

2. axios 快速入门

1.1 导入 axios:import axios from '@ohos/axios'
1.2 创建 axios 实例

const instance = axios.creat({
	baseURL: 'http://<ip>:<port>',
	timeout: 1000
})

1.3 发送 http 请求

// 获取手机验证码
Button('发送验证码')
	.onClick(() => {
		instance.get('/word/user/code', {params: {phone: this.phone}})
		 .then((response) => {
		 	this.code = response.data.data
		 })
		 .catch((error) => {
			console.info(error)
		 })
	}) 
// 登录
Button('登录')
	.onClick(() => {
	  instance.post('/word/user/login', {params: {phone: this.phone, code: this.code}})
		 .then((response) => {
		 	// response.data.data
		 })
		 .catch((error) => {
			console.info(error)
		 })
	})

1.4 获取请求结果,处理异步操作 async await 1

// 登录
Button('登录')
	.onClick(async () => {
	  let response = await instance.post('/word/user/login', {params: {phone: this.phone, code: this.code}})
	  console.info(response.data.data)
	})

// 登录
Button('登录')
	.onClick(async () => {
		try {
		  let response = await instance.post('/word/user/login', {params: {phone: this.phone, code: this.code}})
		  console.info(response.data.data)
		} catch (error){
		  console.info(error)
		}
	})

3. axios 拦截器

  1. axios 可以分别为请求和响应配置拦截器,请求拦截器可在请求发送前拦截,响应拦截器可以在 then() 和 catch() 方法执行前进行拦截。
    在这里插入图片描述
  2. 在拦截器中,开发者可以对请求的参数或者响应的结果做一些统一的处理,比如在请求拦截器中统一为所有请求增加 token 这一 Header,在响应拦截器中统一处理错误响应。

3.1 请求拦截器

instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
	return config
}, (error: AxiosError) => { // 比如手机客户端没有联网
    return Promise.reject(error)
})

3.2 响应拦截器

instance.interceptors.response.use((response: AxiosResponse) => {
   return response
}, (error: AxiosError) => {
   return Promise.reject(error)
})

  1. await关键字:它会等待后面的异步操作执行完成,并解析异步操作的结果。
    加上 await 关键字之后,代码的返回值不再是一个 Promise对象,而是 Promise 当中所包含的这个异步操作的结果,也就是说,我们现在就可以直接接收这个结果。这个结果和 Promise 的 then() 方法的回调函数是一回事,操作成功的异步结果处理完了。
    使用 try {} catch (error) {},可以在 catch 中捕获异常结果,异步操作的异常处理完了。
    使用 async await 关键字能让异步的代码看起来更像同步的代码,可读性要更好,代码更好理解。 ↩︎

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

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

相关文章

以低代码技术加速推动企业数字创新

在数字化转型的浪潮中&#xff0c;企业面临着前所未有的挑战和机遇。随着技术的不断进步&#xff0c;企业需要快速适应市场变化&#xff0c;创新产品和服务&#xff0c;以保持竞争力。低代码技术作为一种新兴的开发模式&#xff0c;正逐渐成为企业数字创新的重要推动力。 低代码…

电比例流量泵放大器

电比例泵控制是一种精准的液压传动控制系统&#xff0c;利用输入的电信号按比例来调制液压参数&#xff0c;以实现对流量、压力和方向的连续且成比例的控制。这种控制在现代工业中的应用非常广泛&#xff0c;尤其在需要精确控制的场合。 按控制元件分类&#xff1a;电液比例控…

无人机培训机构必备运营合格证及驾驶员训练机构合格证详解

无人机培训机构在运营过程中&#xff0c;必须持有必要的运营合格证及驾驶员训练机构合格证&#xff0c;以确保其培训活动的合法性、规范性和安全性。以下是对这两种合格证的详细解析&#xff1a; 无人机培训机构运营合格证 无人机培训机构运营合格证是国家或地区民航管理部门…

【软考中级攻略站】-软件设计师(1)-数值及其转换和数据表示

进制转换 n进制->十进制 步骤说明&#xff1a; 识别基数&#xff1a;首先确认你正在处理的是n进制数&#xff0c;这里的n就是该数的基数。 数位权重&#xff1a;从右向左数&#xff0c;每个位置上的数字都有一个权重&#xff0c;最右边的位置权重为0&#xff0c;依次向左…

【JUC】10-Java内存模型JMM

1. JMM 通过JMM来实现和主内存之间的抽象关系。屏蔽各个硬件平台和操作系统的内存访问差异以实现让Java程序在各种平台下都能达到一致的内存访问效果。 三大特性&#xff1a;原子性&#xff1a;互斥&#xff0c;同时成功或失败。有序性&#xff1a;指令重排序后有序。可见性&a…

MySQL递归获取商品分类以及所有下级分类商品

现在就是我们有一张商品表&#xff0c;还有一张分类表&#xff0c;商品表有一个字段用来记录当前商品分类id的&#xff0c;然后查询时候因为分类是有层级的&#xff0c;如果我们想通过顶层分类获取到它和所有子类的商品时就会需要用到MySQL的递归查询了。 首先是针对 MySQL 8.…

NCMMSC-CNVSRC 2024视觉语音识别竞赛圆满落幕

8月16日上午&#xff0c;NCMMSC-CNVSRC 2024 学术研讨会在乌鲁木齐召开的第十九届全国人机语音通讯学术会议&#xff08;NCMMSC 2024&#xff09;上举行。会上公布了本次视觉语音识别竞赛 CNVSRC 2024 的最终结果&#xff0c;并举行了颁奖仪式。 本次竞赛由 NCMMSC 2024 组委会…

springboot+vue 进销存管理系统

springbootvue 进销存管理系统 相关技术springbootmybatismysqlmavenvueelementui

ANet-1E1S1智能网关:物联网时代的能源计量新纪元,断点续传引领高效运维

在万物互联的物联网时代&#xff0c;数据的精准采集与高效传输成为了推动各行业智能化转型的关键。ANet-1E1S1以其断点续传技术与强大的RS485接口智能通信管理能力&#xff0c;为水、电、气、油等多领域能源管理带来了便捷与效率的提升。基于嵌入式Linux平台的通用型智能通信管…

高经费打造的史诗级视觉盛宴,惊叹于每一帧的奢华

8月29日&#xff0c;备受期待的《指环王&#xff1a;力量之戒》第二季终于上线了。这一季一上架就放出了三集&#xff0c;立刻引发了影迷们的热烈讨论。 自从2022年首季首播以来&#xff0c;《指环王&#xff1a;力量之戒》就一直备受瞩目。尽管首季受到了不少争议&#xff0c;…

【开源大模型生态2】数据、算力、算法,越来越猛!

人工智能(A)的快速发展依赖于三个核心要素:数据&#xff0c;算法&#xff0c;算力。这个观点已经得到了业界的高度认可。只有这三个要素同时满足了才能加速人工智能的大发展。随着人工智能大模型规模变大以及普及应用&#xff0c;人工智能对能源的需求也在不断加大&#xff0c;…

linux文件——文件系统与内存管理——理解打开文件, 写入数据与文件系统的关系

前言&#xff1a;本节课算是一点文件系统的补充内容。 但是说是文件系统的补充内容&#xff0c;其实我们也可以把这篇文章当作linux下的内存管理的文章来看待。 因为博主会从内存管理的角度&#xff0c; 将进程打开文件、写入数据的流程&#xff0c; 以非常底层的角度&#xff…

【C++】汇编分析,函数是如何调用,传参,返回

传参 有的是用寄存器传参&#xff0c;有的用push传参 我在MSVC编译测出来的是PUSH传参&#xff08;debug模式&#xff09;&#xff0c;具体过程如下 long func(long a, long b, long c, long d,long e, long f, long g, long h) {long sum;sum (a b c d e f g h);ret…

护栏碰撞监测系统的发展前景如何?

​ ​护栏碰撞监测系统的发展前景可谓十分广阔&#xff0c;主要体现在以下几个方面&#xff1a; ​ ​一、交通领域需求持续增长 ​ ​1. 道路建设不断拓展 ​ ​●在全球范围内&#xff0c;公路、高速公路以及城市道路等基础设施持续处于新建与扩建的进程之中。以…

再也不用来回切换了,多微同一界面聚合聊天

手上有多个微信&#xff0c;工作时经常要来回切换登录&#xff0c;才能处理聊天和发圈等工作&#xff0c;来回切换不但容易导致号的状态存在异常&#xff0c;还会浪费很多时间登录&#xff0c;忙的时候还可能会导致处理不及时。 今天必须要给你们分享这个超棒的东西&#xff0…

如何写接口自动化测试断言?

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 你真的会写自动化测试断言吗&#xff1f; 在接口测试中&#xff0c;断言是一项非常重要的操作&#xff0c;它是用来校验接口返回结果是否符合预期的一种手段。…

OLED显示屏详解(IIC协议0.96寸 STM32)

目录 一、介绍 二、模块原理 1.原理图 2.工作原理&#xff1a;SSD1306显存与命令 三、程序设计 main.c文件 oled.h文件 oled.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 OLED是有机发光二极管&#xff0c;又称为有机电激光显示&#xff08;Organic Electrol…

惊人发现:clickhouse的cpu暴增之谜

点/击/蓝/字 关/注/我/们 一、背景 前段时间&#xff0c;公司的生产环境的clickhouse的cpu突然持续高压&#xff0c;持续时间大约5个小时&#xff0c;特写此文记录&#xff0c;深挖clickhouse的原理&#xff0c;持续学习。 题主所在的公司的一些历史数据会保存到clickhouse中…

基于php的公司员工管理系统—计算机毕业设计源码25190

摘 要 公司公司员工管理系统除了具有共享系统的全部功能以外&#xff0c;能通过对数据的分析对决策做出解释是其主要的新特点。其体系结构&#xff0c;将由专用的服务器/客户方式向广域网发展&#xff0c;使更多的系统间能够互相交流数据&#xff0c;带动整个行业、领域知识和效…

如何解决前端跨域问题:从CORS到JSONP

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介如何解决前端跨域问题&#xff1a;从CORS到JSONP1. 引言2. 什么是跨域问题&#xff1f;2.1 同源策略&#xff08;Same-Origin Policy&#xff09;2.2 跨域请求的场景 3. 解决跨域问题的常见方法3.1 使用CORS&#xff08;Cross-Orig…