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…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
Frozen-Flask ：将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路 减少 JOIN 数量 数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...
Redis：现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发，其初衷是为了满足他自己的一个项目需求，即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源，Redis凭借其简单易用、…...