本文详细解析axios发送请求时的三种主要传参方式。涵盖GET请求中通过URL拼接与params配置传递Query参数，以及POST/PUT/PATCH请求中基于Form Data、URL编码和JSON格式的Request Payload传参。通过具体代码示例说明不同Content-Type下的参数处理差异，帮助开发者根据接口需求选择合适的数据提交方案。
axios在发送网络请求时，处理请求参数主要有三种常见方式。
第一种是拼接方式，即通过问号（?）和与号（&）在URL中直接拼接参数。
1. Query String Parameters(URL参数)
// + 请求头参数 => 参数被定义在请求头的 请求地址中
// + 该参数的携带方式主要被应用于无请求体的请求中
// + http|https协议的组成中，以?关键字分割地址和参数
// + 参数由 key=value&key=value…… 字符串格式进行组成
// - key 参数属性名（该属性名由服务器段决定）
// - value 参数属性值（理论上任何可以转换为字符串的数据都可以作为参数）
// * URL地址存在长度限制，所以参数容量有限，一般用于携带简单的关键参数
// * JS中有些数据类型强制转换为字符串，会输出无效数据
<input type="button" value="URL参数-地址拼接" onclick="sendURLParams()">
function sendURLParams(){
axios.get("http://127.0.0.1:3000/public/params?username=admin&tel=12345678901")
.then(( {data} )=>{
console.log(data);
})
.catch((error)=>{
console.log(error);
Notice.error({ title:"请求失败" })
})
}第二种是通过配置对象中的params属性来设置参数，例如使用params: {}的形式。
// 2. Request payload
// + 请求体参数
// + 该参数的携带方式只能被应用于有请求体的请求中
<input type="button" value="URL参数-通过配置设定参数" onclick="sendURLParams2()">
function sendURLParams2(){
axios.get("http://127.0.0.1:3000/public/params",{
// `params` 是与请求一起发送的 URL 参数,自动完成参数格式状态
params:{
username:"tom",
tel:12345678901
}
})
.then(( {data} )=>{
console.log(data);
})
.catch((error)=>{
console.log(error);
Notice.error({ title:"请求失败" })
})
}第三种是Form Data（请求体参数），这种方式常用于动态参数，即通过获取DOM节点的value值来动态获取并提交参数。
// 3. Form Data(请求体参数)
// + 请求体参数
// + 该参数的携带方式只能被应用于有请求体的请求中
// HTTP 的请求组成（请求报文）（抓包）
// 请求报文头|请求报文基础信息 = 存储请求必要的解释信息(请求类型、请求格式、请求时长……)
// 请求报文体|额外的请求参数携带
// HTTP 的响应组成（响应报文）
// 响应报文头 = 存储请求必要的解释信息(请求类型、请求格式、请求时长……)
// 响应报文体|服务器响应结果
<input id="username" type="text" value="admin">
<input id="tel" type="text" value="12345678901">
<input type="button" value="URL参数-动态参数" onclick="sendURLParams3()">
function sendURLParams3(){
axios.get("http://127.0.0.1:3000/public/params",{
params:{
username:document.getElementById("username").value,
tel:document.getElementById("tel").value
}
})
.then(( {data} )=>{
console.log(data);
})
.catch((error)=>{
console.log(error);
Notice.error({ title:"请求失败" })
})
}Axios传参的三种方式
一：get请求
在axios中，常见的GET和DELETE请求通常也被称为Query请求。
//一般发送请求是这么写（不推荐）：
axios.get('/user?id=12345&name=user')
.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
//但是为了方便全局统一调用封装的axios，我一般采用（推荐）
axios.get('/user', { //params参数必写 , 如果没有参数传{}也可以
params: {
id: 12345，
name: user
}
})
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});二：post/put/patch请求
在POST、PUT或PATCH请求中，传参方式大致有以下三种： (1) 当‘Content-Type’设置为‘multipart/form-data’时，传参格式为formData。这通常涉及全局请求头设置为‘application/x-www-form-urlencoded’，同时在request的Header中指定‘Content-Type’为‘multipart/form-data’。
var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
axios.post("/notice",formData)
.then((res) => {return res})
.catch((err) => {return err})(2) 当‘Content-Type’设置为‘application/x-www-form-urlencoded’时，传参格式为query形式，通常使用$qs.stringify进行处理。此时，全局请求头和request的Header均设置为‘application/x-www-form-urlencoded’。
import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
data
}))
.then(res=>{
console.log('res=>',res);
})(3) 当‘Content-Type’设置为'application/json'时，传参格式为raw（JSON格式）。注意，全局请求头可能仍显示为‘application/x-www-form-urlencoded’，但request的Header中‘Content-Type’应明确设置为‘application/json;charset=UTF-8’。
//方法一：
import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
console.log('res=>',res);
})
//方法二：
var readyData=JSON.stringify({
id:1234,
name:user
});
axios.post("/notice",readyData)
.then((res) => {return res})
.catch((err) => {return err})到此这篇关于axios请求参数的三种方式的文章就介绍到这了,更多相关axios请求参数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！