Axios发送请求时params和data的区别

在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。 

因为params是添加到url的请求字符串中的,用于get请求。

而data是添加到请求体(body)中的, 用于post请求。

比如对于下面的get请求:
axios({
method: "get",
url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
params: {
info: "西安天气"
},
})
如果我们将params修改为data,显然是不能请求成功的,因为get请求中不存在data这个选项。

1、HTTP请求过程中,get请求:表单参数以name=value&name1=value1的形式附到url的后面;

2、post请求:表单参数是在请求体中,也是name=value&name1=value1的形式在请求体中。
POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。
在html中form的Content-type默认值:Content-type:application/x-www-form-urlencoded
如果使用ajax请求,在请求头中出现 request payload导致参数的方式改变了 ,那么解决办法就是:
headers: {'Content-Type':'application/x-www-form-urlencoded'}
或者使用ajax设置:
$.ajaxSetup({contentType: 'application/x-www-form-urlencoded'});
这样,问题就可以解决。
 

转载于:https://www.cnblogs.com/cwzqianduan/p/8675356.html

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: axios请求参数中的dataparams是两种不同的参数。其中data用于POST、PUT、PATCH等需要传输数据体的请求方法,params则用于GET、DELETE等不需要传输数据体的请求方法。data是一个对象,包含需要传输的数据信息,而params则是一个键值对,用于传递URL查询字符串参数。 ### 回答2: axios是一款基于Promise的轻量级HTTP客户端,用于发送HTTP请求,支持现代浏览器和Node.js环境中使用。 axios请求参数主要包括dataparams。两者的区别在于传递方式不同。 data用于发送POST请求携带的数据,数据以键值对(key-value)的形式传递,后端可在请求体中获取数据并进行处理。一般情况下,data可传递参数对象、FormData对象以及Blob对象。其中,FormData对象可用于上传文件,Blob对象可用于上传二进制数据。 params用于发送GET请求的查询参数,数据以键值对(key-value)的形式传递。在发送GET请求,参数可以作为查询字符串的一部分,如: ``` axios.get('/api/users', { params: { firstName: 'John', lastName: 'Doe', age: 25 } }) ``` 这将向/api/users请求发送一个GET请求,查询参数为?firstName=John&lastName=Doe&age=25。后端可在请求的query中获取查询参数并进行处理。 总体来说,dataparams的作用有些类似,都是用于传递数据,但两者的使用场景和传递方式不同。正确的使用方式能够使代码结构更加健壮可靠。 ### 回答3: axios是一个流行的JavaScript库,用于在浏览器和Node.js中进行HTTP请求。它提供了两个参数用于发送请求dataparams。这两个参数都是用于请求数据的,但有着不同的用途。 1. data data参数用于在请求体中添加数据。当我们使用POST、PUT和PATCH方法,我们需要在请求体中向服务器发送数据。这些数据可以是一个JavaScript对象、Buffer、FormData、ArrayBuffer等类型的数据。 例如: ``` axios.post('/api/users', { name: 'John', age: 30 }) .then(response => console.log(response.data)) .catch(error => console.log(error)); ``` 在这个例子中,我们向服务器发送一个POST请求请求URL为'/api/users',并且我们通过data参数发送了一个包含'name'和'age'键值对的JavaScript对象。服务器可以从请求体中获取到这些数据。 2. params params参数用于向URL中添加查询参数。当我们使用GET请求,我们需要在URL中添加查询参数,发送数据给服务器。这些参数是包含键值对的对象,键是查询参数名,值是查询参数值。 例如: ``` axios.get('/api/users', { params: { name: 'John', age: 30 } }) .then(response => console.log(response.data)) .catch(error => console.log(error)); ``` 在这个例子中,我们向服务器发送一个GET请求请求URL为'/api/users',并且我们通过params参数发送了一个包含'name'和'age'键值对的JavaScript对象。这将把查询参数添加到URL中,最终URL将是'/api/users?name=John&age=30'。服务器可以从查询参数中获取数据。 总结一下,axios的'data'参数用于POST、PUT和PATCH请求,用于向请求体中添加数据,而'params'参数用于GET请求,用于向URL中添加查询参数。正确使用这两个参数可以帮助我们更好地与服务器进行通信,并获取我们所需的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值