03-axios常用的请求方法、axios错误处理

embedded/2024/11/19 11:55:12/

欢迎来到“雪碧聊技术”CSDN博客!

在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将不断探索Java的深邃世界,分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游,携手提升技术能力,共创美好未来!感谢您的关注与支持,期待在“雪碧聊技术”与您共同成长!

目录

一、常用的请求方法有哪些?

1、什么是请求方法?

2、常用的请求方法有哪些?

①GET请求:获取数据

②POST请求:提交数据

③PUT请求:修改数据(全部)

④DELETE请求:删除数据

⑤PATCH请求:修改数据(部分)

3、axios请求配置

4、案例:注册账号

①需求分析

②编写代码

③运行效果

5、总结

二、axios错误处理

1、场景:再次注册相同的账号,会遇到报错信息,提示“账号被占用”

2、处理:用更直观的方式,给普通用户展示错误信息


一、常用的请求方法有哪些?

1、什么是请求方法?

        对服务器资源,要执行的操作。

2、常用的请求方法有哪些?

①GET请求:获取数据

②POST请求:提交数据

场景:当数据需要在服务器上保存。

③PUT请求:修改数据(全部)

④DELETE请求:删除数据

⑤PATCH请求:修改数据(部分)

以上五者,就是restful风格的请求。

3、axios请求配置

  • url:请求的url地址
  • method:请求的方法,如果不写method则默认为GET请求(不区分大小写)
  • data:提交的数据

举例:

4、案例:注册账号

①需求分析

②编写代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05.常用请求方法和数据提交</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册*///1.给按钮绑定事件document.querySelector('.btn').addEventListener('click', ()=>{axios({url:'http://hmajax.itheima.net/api/register',//指定请求方法method:'post',//提交的数据data: {username:'casually678',password:'12345678'}}).then(result=>{//打印返回结果console.log(result)})})</script>
</body></html>

③运行效果

5、总结

注意:查询数据用params,提交数据用data,二者不可混用!

二、axios错误处理

1、场景:再次注册相同的账号,会遇到报错信息,提示“账号被占用”

        

2、处理:用更直观的方式,给普通用户展示错误信息

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05.常用请求方法和数据提交</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册*///1.给按钮绑定事件document.querySelector('.btn').addEventListener('click', ()=>{axios({url:'http://hmajax.itheima.net/api/register',//指定请求方法method:'post',//提交的数据data: {username:'casually678',password:'12345678'}}).then(result=>{//打印返回结果console.log(result)}).catch(error=>{alert(error.response.data.message)})})</script>
</body></html>

运行效果:

以上就是axios的请求方法、错误处理的全部内容,想了解更多axios知识,请关注本博主~


http://www.ppmy.cn/embedded/138757.html

相关文章

华为ID机试 -- 分糖果 E100

题目描述 小明从糖果盒中随意抓一把糖果&#xff0c;每次小明会取出一半的糖果分给同学们。 当糖果不能 平均分配只时&#xff0c;小明可以选择从糖果盒中(假设盒中糖果足够)取出一个糖果或放回一个糖果。 小明最少需要多少次(取出、放回和平均分配均记一次)&#xff0c;能将…

ChatGPT:编程的 “蜜糖” 还是 “砒霜”?告别依赖,拥抱自主编程的秘籍在此!

在当今编程界&#xff0c;ChatGPT 就像一颗耀眼却又颇具争议的新星&#xff0c;它对编程有着不可忽视的影响。但这影响就像一把双刃剑&#xff0c;使用不当&#xff0c;就可能让我们在编程之路上“受伤”。 一、过度依赖 ChatGPT 编程&#xff1a;黑暗深渊里的重重危机 1、个…

室内定位论文精华-无人机与机器人在地下与室内环境中的自主导航与定位新技术

天文导航算法在低成本视觉系统中的应用 关键词 天文导航;自主无人机;GNSS拒止环境;稳定成像系统;星图识别;姿态估计;位置估算 研究问题 现代无人驾驶飞行器(UAV)中,很少使用天文学导航技术。传统的天文学导航依赖于稳定的成像系统,这不仅体积大且重量重,难以满足…

arkUI:设置随机颜色背景

arkUI&#xff1a;设置随机颜色背景 1 主要内容说明2 相关内容2.1 设置随机颜色背景2.1.1 源码1的相关说明2.1.2 源码1 &#xff08;设置随机颜色背景&#xff09;2.1.3 源码1运行效果 3.结语4.定位日期 1 主要内容说明 本文代码实现了一个展示随机颜色的页面&#xff0c;主要…

kubeadm安装k8s

kubeadm安装k8s 环境配置 主节点 k8s-master :4核8G、40GB硬盘、CentOS7.9 从节点 k8s-node1: 4核8G、40GB硬盘、CentOS7.9 从节点 k8s-node2: 4核8G、40GB硬盘、CentOS7.9 初始化配置 关闭selinux、swap # 关闭 Selinux:防止服务可能无法启动(企业中基本上都会选择关闭)…

【鸿蒙开发】第十九章 Media媒体服务 --- 音频播放和录制

目录 1 AVPlayer音频播放 1.1 开发步骤及注意事项 1.2 完整示例 2 SoundPool音频播放 2.1 开发步骤及注意事项 2.2 完整示例 3 AVRecorder音频录制 3.1 开发步骤及注意事项 3.2 完整示例 4 音视频元数据获取 4.1 开发步骤及注意事项 4.2 完整示例 1 AVPlayer音频播…

Fisher矩阵和Hessian矩阵的关系:证明Fisher为负对数似然函数的Hessian的期望

证明Fisher等于Expectation of Hessian of Negative log likelihood. 符号约定 f θ ( ⋅ ) f_{\theta}(\cdot) fθ​(⋅): 概率密度 p ( x ∣ θ ) p θ ( x ) ∏ i N f θ ( x i ) p(x|\theta) p_{\theta}(x) \prod\limits_i^N f_{\theta}(x_i) p(x∣θ)pθ​(x)i∏N​…

Debezium-EmbeddedEngine

提示&#xff1a;一个嵌入式的Kafka Connect源连接器的工作机制 文章目录 前言一、控制流图二、代码分析 1.构造函数2.完成回调3.连接器回调4.RUN总结 前言 工作机制&#xff1a; * 独立运行&#xff1a;嵌入式连接器在应用程序进程中独立运行&#xff0c;不需要Kafka、Kafka C…