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##请求##js#
HTML前端网站开发 文章被收录于专栏

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

全部评论

相关推荐

_tresure:左边如果没有必须的内容能填满侧边栏,还是不要用这种带侧边栏的模板了,我以前也喜欢这种模板,刷多了牛客才发觉太难看了,还会挤占正文空间
点赞 评论 收藏
分享
10-14 15:29
云南大学 Java
点赞 评论 收藏
分享
点赞 1 评论
分享
牛客网
牛客企业服务