• 绘就生态文明新画卷—甘南州造林绿化工作纪实 2019-08-20
  • 云南昭通垃圾污染问题严重 相关人员蒙骗检查被问责 2019-08-20
  • 炮制数万斤毒豆芽 广州三个黑作坊被警方捣毁 2019-08-02
  • 2018年5月后期资助项目结项名单 2019-08-01
  • 女性之声——全国妇联 2019-07-31
  • 你才是“蠢货”!土地是自然存在的地球的一部分,并不是人类劳动成果,哪来价值?土地不是劳动成果,没有价值,正如空气和阳光不是劳动成果,没有价值一样。懂吗... 2019-07-31
  • 学习贯彻落实习近平总书记重要讲话精神·奥一网(oeeee.com) 2019-07-23
  • 新生儿6种异常不用慌 2019-07-15
  • 海尔发行境外上市外资股获批 2019-07-15
  • 朝鲜将变得很富有?外媒驱动引擎是中国而非美国 2019-07-12
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-06-22
  • 中美研究人员发现新型狗流感病毒 2019-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 谈谈axios配置请求头content-type

    现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件—axios。
    > 现在网上可能发送Ajax请求有很多种插件,每种用法可能略有差异,大家只需挑选一种自己喜欢的即可。毕竟现在还有很多人使用jQuery,$.ajax用法也是很多了。

    开始

    因为需要用到axios插件,所以我们现在项目种下载依赖

    npm install axios -S

    axios虽然是一个插件,但是我们不需要通过Vue.use(axios)来使用,下载完成后,只需在项目中引入即可,至于为什么大家可以百度看看,或者留言,貌似是因为开发者在封装axios时,没有写install这一步。

    使用

    比如我们在项目中的myInfo.vue中使用axios,当组件在创建成功后发送Ajax请求得到用户信息展示在我们面前。先引入,然后在组件生命周期函数created中发请求。

    如果需要先请求数据然后根据数据渲染页面展示在我们面前,通??梢栽谧榧芷诠匙觕reated中发送Ajax请求即可,此时组件实例中的属性和方法可以被调用。

    现在到了重点的时刻了~~~

    axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。也就是说,我们的 Content-Type 变成了 application/json;charset=utf-8 ,这是axios默认的请求头content-type类型。但是实际我们后端要求的 'Content-Type': 'application/x-www-form-urlencoded' 为多见,这就与我们不符合。所以很多同学会在这里犯错误,导致请求数据获取不到。明明自己的请求地址和参数都对了却得不到数据。

    我们现在来说说post请求常见的数据格式(content-type)

    1. Content-Type: application/json : 请求体中的数据会以json字符串的形式发送到后端
    2. Content-Type: application/x-www-form-urlencoded:请求体中的数据会以普通表单形式(键值对)发送到后端
    3. Content-Type: multipart/form-data: 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。

    我们熟悉了常见的请求数据格式之后,现在我们来解决刚才遇到的问题: 后端需要接受的数据类型为:application/x-www-form-urlencoded,我们前端该如何配置:

    常见方法汇总:

    1. 【用 URLSearchParams 传递参数】代码简单,省事
    let param = new URLSearchParams()
    param.append('username', 'admin')
    param.append('pwd', 'admin')
    axios({
        method: 'post',
        url: '/api/lockServer/search',
        data: param
    })

    可以看到我在项目中采用的就是第一种方法。> 需要注意的是: URLSearchParams 不支持所有的浏览器,但是总体的支持情况还是 OK 的,所以优先推荐这种简单直接的解决方案

    1. 配置axios请求头中的content-type为指定类型
    2. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 或者 {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
    3. 将参数转换为query参数, 利用qs

    引入 qs ,这个库是 axios 里面包含的,不需要再下载了。

    import Qs from 'qs'
    let data = {
        "username": "cc",
        "psd": "123456"
    }
    
    axios({
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'post',
        url: '/api/lockServer/search',
        data: Qs.stringify(data)
    })

    好了,我们解决了常见的application/x-www-form-urlencoded形式的传参,那么对于后面的两种又是怎样转换的呢,且听我一一道来。

    1. Content-Type: multipart/form-data

    对于这种类型的数据,我们常见前端页面上传个人图像,然后点击保存发送后端修改原始数据。解决办法下:

            let params = new FormData()
            params.append('file', this.file)
            params.append('id', localStorage.getItem('userID'))
            params.append('userName', this.name)
            params.append('sex', this.sex)
            params.append('mobile', this.phone)
            params.append('email', this.email)
            params.append('qq', this.qq)
            params.append('weChat', this.WeChat)
    
            axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
              if (res.data.code === 0) {
                this.$router.go(-1)
              }
            }).catch(error => {
              alert('更新用户数据失败' + error)
            })

    可以看到我这里就是用到了这种方法实现用户图像更新效果的~~

    1. Content-Type: application/json

    这种是axios默认的请求数据类型,我们只需将参数序列化json字符串进行传递即可,无需多余的配置。

    总结

    好了,以上基本的axios配置Content-Type的方法就讲述到这里,欢迎大家提出更好的建议和指正其中的错误。

    同时大家也可以在GitHub上给我分享更多实用的前端知识,欢迎star,哈哈

    GitHub 戳这里

    posted @ 2019-04-22 20:01 pubdreamcc 阅读(...) 评论(...) 编辑 收藏
  • 绘就生态文明新画卷—甘南州造林绿化工作纪实 2019-08-20
  • 云南昭通垃圾污染问题严重 相关人员蒙骗检查被问责 2019-08-20
  • 炮制数万斤毒豆芽 广州三个黑作坊被警方捣毁 2019-08-02
  • 2018年5月后期资助项目结项名单 2019-08-01
  • 女性之声——全国妇联 2019-07-31
  • 你才是“蠢货”!土地是自然存在的地球的一部分,并不是人类劳动成果,哪来价值?土地不是劳动成果,没有价值,正如空气和阳光不是劳动成果,没有价值一样。懂吗... 2019-07-31
  • 学习贯彻落实习近平总书记重要讲话精神·奥一网(oeeee.com) 2019-07-23
  • 新生儿6种异常不用慌 2019-07-15
  • 海尔发行境外上市外资股获批 2019-07-15
  • 朝鲜将变得很富有?外媒驱动引擎是中国而非美国 2019-07-12
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-06-22
  • 中美研究人员发现新型狗流感病毒 2019-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 私彩输的钱可以追回吗 武汉篮球城超联赛 时时彩推荐 秒速赛app 江苏时时大小单双 北京时时人工计划 彩票万能公式 辽宁十一选五计划 1683168诸侯快讯足球 乐游棋牌透视辅助器 重庆时时彩分析的软件下载 一万的洗码费是多少 黑龙江省十一选五 APP自助领取彩金38 安徽时时号码 老时时往期开奖记录