Axios传值的几种方式
<body><script src="https://unpkg.com/axios/dist/axios.min.js"></script></body>axios基本使用
默认是get请求
注意：get请求无请求体，可以有body,但是不建议带
使用get方式进行无参请求
<script>axios({url:'http://localhost:8080/get/getAll',method:'get'}).then(res=>{console.log(res.data.data)})</script>@GetMapping("/get/getAll")public ResResult getAllUser(){List<User> list = userService.list();return ResResult.okResult(list);}使用get方式请求，参数值直接放在路径中
<script>axios({url:'http://localhost:8080/get/1',method:'get'}).then(res=>{console.log(res.data.data)})</script>后端接口@GetMapping("/get/{id}")public ResResult getUserById(@PathVariable("id") Long id){User user = userService.getById(id);return ResResult.okResult(user);}使用get方式请求，参数拼接在路径中：方式①
<script>axios({url:'http://localhost:8080/get?id=1',method:'get'}).then(res=>{console.log(res.data.data)})</script>后端接口@GetMapping("/get")public ResResult getUserByIds(@RequestParam("id") Long id){User user = userService.getById(id);return ResResult.okResult(user);}使用get方式请求，参数拼接在路径中：方式②
<script>axios({url:'http://localhost:8080/get',params:{id:'2'},method:'get'}).then(res=>{console.log(res.data.data)})</script>
后端接口
@GetMapping("/get")public ResResult getUserByIds(@RequestParam("id") Long id){User user = userService.getById(id);return ResResult.okResult(user);
}使用get方式请求，拼接多个参数在路径中：方式③
<script>axios({url:'http://localhost:8080/get',params:{id:'2',username:'swx'},method:'get'}).then(res=>{console.log(res.data.data)})
</script>
后端接口
@GetMapping("/get")public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();wrapper.eq(User::getUsername,username);wrapper.eq(User::getId,id);User user = userService.getOne(wrapper);return ResResult.okResult(user);}post请求接收json格式数据
<script>axios({url:'http://localhost:8080/post/test',data:{'username':'swx'},method:'post'}).then(res=>{console.log(res.data.data)})
</script>
后端接口
@PostMapping("/post/test")public ResResult getUserByIdPostTest(@RequestBody User user){LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();wrapper.eq(User::getUsername,user.getUsername());User users = userService.getOne(wrapper);return ResResult.okResult(users);}3、请求简写方式&请求失败处理
get无参请求
<script>axios.get('http://localhost:8080/get/getAll').then(res=>{console.log(res.data.data)}).catch(err=>{console.log('timeout')console.log(err)})
</script>get有参请求,post方式不可以这样请求
<script>axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{console.log(res.data.data)}).catch(err=>{console.log('timeout')console.log(err)})
</script>post有参请求，以json格式请求
<script>axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{console.log(res.data.data)}).catch(err=>{console.log('timeout')console.log(err)})
</script>也可以一下方式，但是后端要加@RequestBody注解
<script>axios.post('http://localhost:8080/post/test',{username:'swx'}).then(res=>{console.log(res.data.data)}).catch(err=>{console.log('timeout')console.log(err)})
</script>axios并发请求
<script>axios.all([axios.get('http://localhost:8080/get/getAll'),axios.get('http://localhost:8080/get/get',{params:{id:'1'}})]).then(res=>{//返回的是数组，请求成功返回的数组console.log(res[0].data.data),console.log(res[1].data.data)}).catch(err=>{console.log(err)})
</script>
后端接口
@GetMapping("/get/getAll")public ResResult getAllUser(){List<User> list = userService.list();return ResResult.okResult(list);}@GetMapping("/get/get")public ResResult getUserByIdt(@RequestParam("id") Long id){User user = userService.getById(id);return ResResult.okResult(user);}方式2：使用spread方法处理返回的数组
<script>axios.all([axios.get('http://localhost:8080/get/getAll'),axios.get('http://localhost:8080/get/get',{params:{id:'1'}})]).then(//高端一些axios.spread((res1,res2)=>{console.log(res1.data.data),console.log(res2.data.data)})).catch(err=>{console.log(err)})
</script>axios全局配置
<script>axios.defaults.baseURL='http://localhost:8080'; //全局配置属性axios.defaults.timeout=5000; //设置超时时间//发送请求axios.get('get/getAll').then(res=>{console.log(res.data.data)});axios.post('post/getAll').then(res=>{console.log(res.data.data)});
</script>axios实例
<script>//创建实例let request = axios.create({baseURL:'http://localhost:8080',timeout:5000});//使用实例request({url:'get/getAll'}).then(res=>{console.log(res.data.data)});request({url:'post/getAll',method:'post'}).then(res=>{console.log(res.data.data)})
</script>Axios各种参数携带方式详解 - 知乎 (zhihu.com)
相关文章：
Axios传值的几种方式
<body><script src"https://unpkg.com/axios/dist/axios.min.js"></script></body> axios基本使用 默认是get请求 注意：get请求无请求体，可以有body,但是不建议带 使用get方式进行无参请求 <script>axios(…...
git pull 报错 error object file is empty , The remote end hung up unexpectedly
报错原因分析：git pull的时候服务器在重启，导致git文件损坏 方法来源： 解决git错误: error object file is empty , The remote end hung up unexpectedly-CSDN博客 亲测有效 find .git/objects/ -type f -empty | xargs rm git fetch -p…...
手机数码类展示预约小程序效果如何
对于一家手机数码/电脑品牌来说，研发产品或衍生产品不少，通常会通过线上商城进行售卖。十年以来，流量成本逐渐增加，获客不易也难以寻找到合适的渠道，即使通过广告形式也因缺乏创意而耗时耗力，效果不佳。 同…...
图神经网络：消息传递算法
一、说明 图网络-GNN（Graph Neural Networks）是近几年研究的主题之一，虽不及深度神经网络那么火爆，但在一些领域，如分子化学方面是不得不依赖的理论。本文就一些典型意义的图神经网络消息传递展开阐述。 二、图网络简述…...
安全+Linux！IBM新一代大型机Z14全新发布
导读本周，以“架构 人机同行”为主题的IBM Systems创行者高峰论坛在北京召开，IBM全球及大中华区硬件系统部负责人，金融、医疗、制造等领域的企业、合作伙伴共与这一年度盛会，探讨认知时代下的基础架构技术趋势及IBM硬件系统业务的…...
Java中的局部变量和成员变量的区别
局部变量和成员变量的区别 区别1：代码中位置不同 成员变量：类中方法外定义的变量 局部变量：方法中定义的变量 代码块中定义的变量 区别2：代码的作用范围 成员变量：当前类的很多方法 局部变量：当前一…...
基于C++实现循环赛日程表（分治算法）
一、问题描叙 设有n2^k个运动员，要进行网球循环赛。现在要设计一个满足以下要求的比赛日程表 每个选手必须与其他n-1个选手各赛一场每个选手一天只能赛一次循环赛一共进行n-1天 二、问题分析 按此要求可将比赛日程表设计成n行n-1列的表，在表中第 i 行…...
基于uni-app的汽车租赁app的设计与实现
1.项目背景及意义 项目背景： 随着人们生活水平的提高，汽车租赁服务在城市中变得越来越普及。传统的租车方式存在一些问题，比如租车流程繁琐、费用不透明、选择有限等。因此，开发一款基于uni-app的汽车租赁app成为了满足用户需求…...
3.8-镜像的发布
如果我们想将image push到docker hub里面，那么我们的image的名字一定要是这种格式：docker hub id/imageName，例如：lvdapiaoliang/hello-docker docker hub个人账户设置地址： 在push之前要先登录： docker l…...
Navicat 基于 GaussDB 主备版的快速入门
Navicat Premium（16.2.8 Windows版或以上） 已支持对GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能，还提供强大的高阶功能（如模型、结构同步、协同合作、数据迁移等），这…...
String的字符串拼接
java中 String a “123” “234”; String b “123”; String c b “234”; 其中a和c的区别是什么？ a c 为什么为false 在Java中，字符串的处理特别是涉及到字符串常量和字符串变量的连接时，会涉及到字符串池（String Pool&a…...
反渗透水处理成套设备有哪些
反渗透水处理成套设备主要包括反渗透装置、预处理系统、控制系统等部分。 反渗透装置：反渗透水处理设备的核心部分，由反渗透膜、压力容器、膜组件等组成。反渗透膜是一种高分子材料制成的半透膜，能够截留水中的溶解盐、有机物、细菌等杂质&a…...
DPC15 国产带有 SPI 接口的独立 CAN 控制器兼容替代MCP2551
DPC15是一款独立控制器局域网络（Controller Area Network，CAN）协议控制器，完全支持CAN V2.0B技术规范。该器件能发送和接收标准和扩展数据帧以及远程帧。 DPC15自带的两个验收屏蔽寄存器和六个验收滤波寄存器可以过滤掉不想要的报…...
【ELK01】ELK简介以及ElasticSearch安装、ES客户端工具-Head安装、报错问题整理
有一段时间没有更新这个专栏了，最近在用ELK相关的技术，今天开始写一下ELK的系列的内容，与大家共同学习 一、什么是ELK ELK 是elastic公司提供的一套完整的日志收集以及展示的解决方案，是三个产品的首字母缩写，分别是ElasticSearch、Logstash 和 Kibana。 1. E-ELASTICS…...
根据音频绘制频谱
根据音频链接绘制频谱图 封装 // 可以这样使用 也可以 import { AudioContext } from standardized-audio-context; const getAudioContext window.AudioContext ||window.webkitAudioContext ||window.mozAudioContext ||window.msAudioContext;const clearArr []export c…...
SSL证书对网站SEO的好处
随着网络安全意识的提高，越来越多的网站开始采用SSL证书来保护自己的数据传输过程。那么，SSL证书真的能为网站SEO带来好处吗？下面将为您分析这个问题。 加强用户体验和信任度 SSL证书不仅能确保数据传输的安全性，还能让客户感受…...
YB506AB是一款理电池充、放电管理专用芯片，集成锂电池充电管理和降压DC-DC电路。
YB506AB 锂电转可充电AA/AAA电池专用SOC芯片 概述: YB506AB是一款理电池充、放电管理专用芯片，集成锂电池充电管理和降压DC-DC电路。充电过程满足锂电池三段式滑流/恒流/恒压充电规范，B506内部的线性充电电路采用了恒流可配置模式，可以通过…...
Linux | C语言中volatile关键字的理解
目录 前言 一、代码引入 二、现象解释 三、具体引用 前言 本章主要讲解介绍volatile关键的作用与使用场合；深刻理解volatile关键字；本文你需要有信号相关的基础知识； Linux | 信号-CSDN博客 一、代码引入 首先，我们来查看下面…...
汇编层面有三个主要的操作对象
1.为啥会有addi指令？ 在汇编层面有三个主要的操作对象：寄存器，内存，立即数，它们是完全不同，不可以混淆，组织结构也不一样的不同对象，所以不能单纯拿针对寄存器的指令去处理内存和立…...
React中的Redux：简介和实例代码
React是一个流行的JavaScript库，用于构建用户界面。它提供了一种简单而强大的方式来构建交互式的界面。Redux是一个用于管理应用程序状态的JavaScript库。它可以与React一起使用，以帮助管理React应用程序的状态。 引言 在本文中，我们将介绍R…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一：使用Read()读取文件2.3、方式二：bufio读取文件2.4、方式三：os.ReadFile读取2.5、写…...
探索Selenium：自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...