axios请求中get与post的参数传递问题

​axios的请求格式有一下几种

 详细且直观的教程:Axios 各种请求方式传递参数格式 - 简书 (jianshu.com)https://www.jianshu.com/p/53deecb09077

 1.最基础的axios使用方法-post

this.$axios({  //这种格式,是需要每个参数都弄成对象的
        methods: 'POST',
        url: '#',
        data: {
          key1: val1,
          key2: val2
        },
        timeout: 1000,
        baseURL:'xxxx'
        ...//其他相关配置
      })

  2.最基础的axios使用方法-get

  this.$axios({
        methods: 'get',
        url: '#',
        params: {  //注意是params,get请求必须写上params,不能写data
          key1: val1,
          key2: val2
        },
        timeout: 1000,
        baseURL:'xxxx'
        ...//其他相关配置
      })

注意:

*在get请求下,参数需要使用【params】来设置,

*而post请求中,是使用data来传递的

3.axios的简化写法 

this.$axios.get('url')

这种直接没有参数的,就写个url就行了

如果get请求中有参数,需要用params:{}括起来

如果有请求的其他配置信息,则直接跟着params往下写即可

this.$axios.get('url', 
{ 
  params: this.formData ,
  timeout: 1000,
  baseURL:'xxxx'
})


this.$axios.get('url', 
{
  params: { key1: val1, key2: val2 } ,
  timeout: 1000,  //跟params并列,都在一个{}里面
  baseURL:'xxxx'
})
this.$axios.post('url')

注意post和get的简写不同之处 :

formData={
    key1:val1,
    key2:val2
    ....
   }
....

//如果只跟参数,没有其他配置项了,可以不用把参数用{}包裹起来,直接写就行
this.$axios.post('url', this.formData)


this.$axios.post('url', 
 //post类型的请求,第二个{}对象是参数,而且这样的简写模式,不能再写data:{},得直接用{}将参数括起来
    //或者直接写this.formData
    {key1:val1,key2:val2},
 //然后又其他的配置,再用{}括起来,跟data同级别放置,单独一个花括号,不跟data参数一个花括号
    {
      timeout: 1000,
      baseURL:'xxxx'
    }
)

如果有多个参数,就需要用 {} 包裹起来,并且要按照 key:val键值对的格式来声明

而且,因为是post请求,所以传参的key要用data

 同上,因为有多个数据配置项,所以要用 {} 包裹起来

而且,因为是get请求,所以传参的key要用params

注意:get请求直接写参数是错误写法,会导致请求无法携带参数 

this.$axios.get('url', {key1:val1,key2:val2})   //错误写法,get请求必须用params指定参数

如果没有其他配置项,也不要直接{参数},一定要加上params ,上面这种直接写参数的方法,发送请求的时候是不会带上参数的!

重点说明:

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

因为:

1.params是添加到url的请求字符串中的,用于get请求;

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

未知错误:

然后你以为用对【params】和【data】就能正确拿到数据了?nonono~ too young to simple

​编辑

 只有这样的简写模式能直接在请求头中看到传递的参数,如果不使用简写,而是使用下面的这种完全的格式写法:

​编辑

那么,请求头中看不到参数。而原因就是Content-Type的问题

在使用原生ajax、axios请求时,如果不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了【但是:jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded】

解决方法:

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

或者: 

​{headers:{'Content-Type':'application/x-www-form-urlencoded'}}

 显式地设置axios的请求头,这样就能看见请求头参数了

当然,你也可以 直接用简写模式嘛,省事省力~

虽然我有设置 'Content-Type': 'application/json;charset=UTF-8',但还是只有缩写版才能看见请求体的数据,没找到原因,不懂,啊吧啊吧啊吧~​

#axios##请求#
HTML前端网站开发 文章被收录于专栏

以实战为线索,逐步深入HTML开发各个环节,掌握web前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。

全部评论

相关推荐

已经入职字节快一个月了,突然想起来之前那段时间的面经没有发,先发一下timeline吧。Tiktok 内容安全平台(人才库电话捞我):电话10.28 -> 一面10.30(我觉得你跟我们组业务挺match的,然后过了三天问hr挂了,应该是别人流程更快)阿里淘天:投递11.11->约面11.12->一面11.14(问得很简单,30分钟,手撕八股全过无后续)Kpi面腾讯wxg 微信小程序:投递11.13 ->约面11.14-> 一面11.17 (究极无敌拷打,问我多模态大模型涉及的算法?但是人很好)->11.19流程终止小红书 风控平台:投递11.16 —约面11.17  ->一面11.18 (抽象的面试官,面试感觉一般,问得前端网页安全相关的,确实没准备)->11.20挂百度 百家号:投递11.14 —>约面11.14 ->一面11.14(当场约2面)->二面11.24->口头告知offer, 拒绝(原因是业务不太好)美团 技术平台投递11.17 -> 约面(忘记了,没多久) ->一面11.19 ->二面11.21 (字节offer不想面了)快手 电商业务投递11.17 -> 约面11.18 ->一面11.19 -> 二面11.21(拒了)腾讯wxg 微信支付(被捞):(直接发面试邮件)技术一面12.05 ->技术二面12.11 ->技术三面12.17 -> hr面已拒绝(了解业务后拒绝,但是有转正hc,感觉还蛮可惜)字节跳动 xxxx:东家就不放具体的时间线了,大概是面完第二天就能知道结果,除了有几天ld请假了没填面评。不去wxg还有个原因是还在期末周,深圳学校来回太麻烦了,至少现在在的组感觉能学到很多的东西,自己的选择应该也没错。还是感概一下,一年前大二的时候投简历海投基本上石沉大海,无论大小厂约面比例很少。现在基本上投了就有面试,还都是以前梦寐以求的大厂,现在自己也有了更多的选择,也没有投太多简历。也感谢上一段实习的经历,很有意思的项目,无论是字节,腾讯,还是美团基本都有聊这个项目。面经需要等一下,也许等周末有空了再发给各位uu,感兴趣可以关注一下~有想要交流学习的同学也可以私信我,目前人在北京大钟寺~,可以找搭子~
正能量的牛可乐:这么多大厂面试下来,不仅摸清了不同公司的面试风格,还能精准避雷业务不匹配的岗位,血赚
实习简历求拷打
点赞 评论 收藏
分享
评论
点赞
1
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务