当前位置： 首页 > news >正文

Axios传值的几种方式

news 2026/4/1 15:44:18 
 <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请求 注意&#xff1a;get请求无请求体&#xff0c;可以有body,但是不建议带 使用get方式进行无参请求 <script>axios(…...

编程日记 2023/11/20 15:32:24

git pull 报错 error object file is empty , The remote end hung up unexpectedly

报错原因分析&#xff1a;git pull的时候服务器在重启&#xff0c;导致git文件损坏 方法来源&#xff1a; 解决git错误: error object file is empty , The remote end hung up unexpectedly-CSDN博客 亲测有效 find .git/objects/ -type f -empty | xargs rm git fetch -p…...

编程日记 2023/11/20 15:31:23

手机数码类展示预约小程序效果如何

对于一家手机数码/电脑品牌来说&#xff0c;研发产品或衍生产品不少&#xff0c;通常会通过线上商城进行售卖。十年以来&#xff0c;流量成本逐渐增加&#xff0c;获客不易也难以寻找到合适的渠道&#xff0c;即使通过广告形式也因缺乏创意而耗时耗力&#xff0c;效果不佳。 同…...

编程日记 2023/11/20 15:30:22

图神经网络：消息传递算法

一、说明 图网络-GNN&#xff08;Graph Neural Networks&#xff09;是近几年研究的主题之一&#xff0c;虽不及深度神经网络那么火爆&#xff0c;但在一些领域&#xff0c;如分子化学方面是不得不依赖的理论。本文就一些典型意义的图神经网络消息传递展开阐述。 二、图网络简述…...

编程日记 2023/11/20 15:29:22

安全+Linux！IBM新一代大型机Z14全新发布

导读本周&#xff0c;以“架构 人机同行”为主题的IBM Systems创行者高峰论坛在北京召开&#xff0c;IBM全球及大中华区硬件系统部负责人&#xff0c;金融、医疗、制造等领域的企业、合作伙伴共与这一年度盛会&#xff0c;探讨认知时代下的基础架构技术趋势及IBM硬件系统业务的…...

编程日记 2023/11/20 15:28:21

Java中的局部变量和成员变量的区别

局部变量和成员变量的区别 区别1&#xff1a;代码中位置不同 成员变量&#xff1a;类中方法外定义的变量 局部变量&#xff1a;方法中定义的变量 代码块中定义的变量 区别2&#xff1a;代码的作用范围 成员变量&#xff1a;当前类的很多方法 局部变量&#xff1a;当前一…...

编程日记 2023/11/20 15:27:18

基于C++实现循环赛日程表（分治算法）

一、问题描叙 设有n2^k个运动员&#xff0c;要进行网球循环赛。现在要设计一个满足以下要求的比赛日程表 每个选手必须与其他n-1个选手各赛一场每个选手一天只能赛一次循环赛一共进行n-1天 二、问题分析 按此要求可将比赛日程表设计成n行n-1列的表&#xff0c;在表中第 i 行…...

编程日记 2023/11/20 15:26:18

基于uni-app的汽车租赁app的设计与实现

1.项目背景及意义 项目背景&#xff1a; 随着人们生活水平的提高&#xff0c;汽车租赁服务在城市中变得越来越普及。传统的租车方式存在一些问题&#xff0c;比如租车流程繁琐、费用不透明、选择有限等。因此&#xff0c;开发一款基于uni-app的汽车租赁app成为了满足用户需求…...

编程日记 2023/11/20 15:25:16

3.8-镜像的发布

如果我们想将image push到docker hub里面&#xff0c;那么我们的image的名字一定要是这种格式&#xff1a;docker hub id/imageName&#xff0c;例如&#xff1a;lvdapiaoliang/hello-docker docker hub个人账户设置地址&#xff1a; 在push之前要先登录&#xff1a; docker l…...

编程日记 2023/11/20 15:24:15

Navicat 基于 GaussDB 主备版的快速入门

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…...

编程日记 2023/11/20 15:23:14

String的字符串拼接

java中 String a “123” “234”; String b “123”; String c b “234”; 其中a和c的区别是什么&#xff1f; a c 为什么为false 在Java中&#xff0c;字符串的处理特别是涉及到字符串常量和字符串变量的连接时&#xff0c;会涉及到字符串池&#xff08;String Pool&a…...

编程日记 2023/11/20 15:22:12

反渗透水处理成套设备有哪些

反渗透水处理成套设备主要包括反渗透装置、预处理系统、控制系统等部分。 反渗透装置&#xff1a;反渗透水处理设备的核心部分&#xff0c;由反渗透膜、压力容器、膜组件等组成。反渗透膜是一种高分子材料制成的半透膜&#xff0c;能够截留水中的溶解盐、有机物、细菌等杂质&a…...

编程日记 2023/11/20 15:21:11

DPC15 国产带有 SPI 接口的独立 CAN 控制器兼容替代MCP2551

DPC15是一款独立控制器局域网络&#xff08;Controller Area Network&#xff0c;CAN&#xff09;协议控制器&#xff0c;完全支持CAN V2.0B技术规范。该器件能发送和接收标准和扩展数据帧以及远程帧。 DPC15自带的两个验收屏蔽寄存器和六个验收滤波寄存器可以过滤掉不想要的报…...

编程日记 2023/11/20 15:20:10

【ELK01】ELK简介以及ElasticSearch安装、ES客户端工具-Head安装、报错问题整理

有一段时间没有更新这个专栏了，最近在用ELK相关的技术，今天开始写一下ELK的系列的内容，与大家共同学习 一、什么是ELK ELK 是elastic公司提供的一套完整的日志收集以及展示的解决方案，是三个产品的首字母缩写，分别是ElasticSearch、Logstash 和 Kibana。 1. E-ELASTICS…...

编程日记 2023/11/20 15:18:08

根据音频绘制频谱

根据音频链接绘制频谱图 封装 // 可以这样使用 也可以 import { AudioContext } from standardized-audio-context; const getAudioContext window.AudioContext ||window.webkitAudioContext ||window.mozAudioContext ||window.msAudioContext;const clearArr []export c…...

编程日记 2023/11/20 15:17:06

SSL证书对网站SEO的好处

随着网络安全意识的提高&#xff0c;越来越多的网站开始采用SSL证书来保护自己的数据传输过程。那么&#xff0c;SSL证书真的能为网站SEO带来好处吗&#xff1f;下面将为您分析这个问题。 加强用户体验和信任度 SSL证书不仅能确保数据传输的安全性&#xff0c;还能让客户感受…...

编程日记 2023/11/20 15:16:05

YB506AB是一款理电池充、放电管理专用芯片，集成锂电池充电管理和降压DC-DC电路。

YB506AB 锂电转可充电AA/AAA电池专用SOC芯片 概述: YB506AB是一款理电池充、放电管理专用芯片&#xff0c;集成锂电池充电管理和降压DC-DC电路。充电过程满足锂电池三段式滑流/恒流/恒压充电规范&#xff0c;B506内部的线性充电电路采用了恒流可配置模式&#xff0c;可以通过…...

编程日记 2023/11/20 15:15:04

Linux | C语言中volatile关键字的理解

目录 前言 一、代码引入 二、现象解释 三、具体引用 前言 本章主要讲解介绍volatile关键的作用与使用场合&#xff1b;深刻理解volatile关键字&#xff1b;本文你需要有信号相关的基础知识&#xff1b; Linux | 信号-CSDN博客 一、代码引入 首先&#xff0c;我们来查看下面…...

编程日记 2023/11/20 15:14:03

汇编层面有三个主要的操作对象

1.为啥会有addi指令&#xff1f; 在汇编层面有三个主要的操作对象&#xff1a;寄存器&#xff0c;内存&#xff0c;立即数&#xff0c;它们是完全不同&#xff0c;不可以混淆&#xff0c;组织结构也不一样的不同对象&#xff0c;所以不能单纯拿针对寄存器的指令去处理内存和立…...

编程日记 2023/11/20 15:11:59

React中的Redux：简介和实例代码

React是一个流行的JavaScript库&#xff0c;用于构建用户界面。它提供了一种简单而强大的方式来构建交互式的界面。Redux是一个用于管理应用程序状态的JavaScript库。它可以与React一起使用&#xff0c;以帮助管理React应用程序的状态。 引言 在本文中&#xff0c;我们将介绍R…...

编程日记 2023/11/20 15:10:58

用8086和蜂鸣器DIY音乐盒：手把手教你复刻童年旋律（附完整汇编代码）

用8086和蜂鸣器DIY音乐盒&#xff1a;手把手教你复刻童年旋律&#xff08;附完整汇编代码&#xff09; 记得小时候第一次听到电子贺卡发出《生日快乐》的单调旋律时&#xff0c;那种机械却又神奇的"音乐"让我盯着电路板研究了半天。现在想来&#xff0c;那些简单的方…...

编程新知 2026/4/1 14:51:20

QuickBMS技术探索者指南：游戏资源解析与逆向工程实战

QuickBMS技术探索者指南&#xff1a;游戏资源解析与逆向工程实战 【免费下载链接】QuickBMS QuickBMS by aluigi - Github Mirror 项目地址: https://gitcode.com/gh_mirrors/qui/QuickBMS 在数字内容创作与逆向工程领域&#xff0c;文件格式的多样性与加密机制的复杂性…...

编程新知 2026/4/1 14:03:45

Linux党福利：Debian12下用VSCode+SDCC玩转51单片机（含WSL配置指南）

Debian 12下构建开源51单片机开发环境&#xff1a;VSCodeSDCC全攻略 在Linux环境下开发51单片机一直是个小众但极具技术挑战性的选择。相比Windows平台上Keil的垄断地位&#xff0c;开源工具链在Linux上的表现往往被低估。本文将带你用VSCodeSDCC在Debian 12上搭建一个完整的51…...

编程新知 2026/4/1 12:18:12

FastAPI CSP：实现配置的终极指南

FastAPI CSP&#xff1a;实现配置的终极指南 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI是一个高性能、易于学习、快速编码…...

编程新知 2026/4/1 11:03:23

Next-MDX-Remote部署指南：从开发到生产环境的完整流程

Next-MDX-Remote部署指南&#xff1a;从开发到生产环境的完整流程 【免费下载链接】next-mdx-remote Load mdx content from anywhere through getStaticProps in next.js 项目地址: https://gitcode.com/gh_mirrors/ne/next-mdx-remote Next-MDX-Remote 是一款强大的 N…...

编程新知 2026/4/1 11:03:22

如何从微信聊天记录中提取数据价值：WeChatMsg的完整解决方案

如何从微信聊天记录中提取数据价值&#xff1a;WeChatMsg的完整解决方案 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we…...

编程新知 2026/4/1 10:49:10

ReadCat：开源无广告小说阅读器，为深度阅读者打造纯净体验

ReadCat&#xff1a;开源无广告小说阅读器&#xff0c;为深度阅读者打造纯净体验 【免费下载链接】read-cat 一款免费、开源、简洁、纯净、无广告的小说阅读器 项目地址: https://gitcode.com/gh_mirrors/re/read-cat 在信息爆炸的时代&#xff0c;找到一款无广告、界面…...

编程新知 2026/4/1 10:41:09

NVIDIA Profile Inspector实战手册：从参数调试到显卡性能全面优化

NVIDIA Profile Inspector实战手册&#xff1a;从参数调试到显卡性能全面优化 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 在PC硬件优化领域&#xff0c;专业工具与普通用户之间往往存在技术鸿沟。N…...

编程新知 2026/4/1 8:40:55

Qwen3.5-9B-AWQ-4bitWeb界面使用教程：上传/提问/防重复提交/结果解析全流程

Qwen3.5-9B-AWQ-4bit Web界面使用教程&#xff1a;上传/提问/防重复提交/结果解析全流程 1. 认识Qwen3.5-9B-AWQ-4bit模型 Qwen3.5-9B-AWQ-4bit是一个强大的多模态AI模型&#xff0c;它能够同时理解图片和文字。想象一下&#xff0c;你有一个既会看图片又会回答问题的智能助手…...

编程新知 2026/4/1 6:48:05

Llama-3.2V-11B-cot实战：基于SpringBoot构建企业级智能客服原型

Llama-3.2V-11B-cot实战&#xff1a;基于SpringBoot构建企业级智能客服原型 最近在帮一个朋友的公司做技术选型&#xff0c;他们想快速搭建一个智能客服原型&#xff0c;既要成本可控&#xff0c;又要能快速集成到现有的Java技术栈里。聊了一圈&#xff0c;发现很多团队都卡在…...

编程新知 2026/4/1 6:41:59