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前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。

全部评论

相关推荐

07-11 22:27
中南大学 Java
程序员牛肉:学历的话没问题。但是没问题的也就只有学历了。 其实你的整体架构是正确的,博客接着干。但是项目有点过于简单了。从后端的角度上讲,你这也就是刚入门的水平,所以肯定约面试够呛。 如果你要应聘后端岗位,那你第一个项目竟然是仿写操作系统。这个你要面试官咋问你。你一定要记住一点,你简历上写的所有的东西,都是为了证明你有能力胜任当前的岗位,而不是为了证明你自己会什么。 如果你只是浅浅的做几个项目,描述也都是烂大街。技术点也都是各种混水类的配置类需求,那你就不要幻想自己能走多远。一定要保持思考,保持学习。
点赞 评论 收藏
分享
评论
点赞
1
分享

创作者周榜

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