axios配置请求头content-type「建议收藏」

axios配置请求头content-type「建议收藏」axios是Ajax的一个插件,axios虽然是一个插件,但是我们不需要通过Vue.use(axios)来使用,下载完成后,只需在项目中引入即可。(一般我们放在了请求接口的公共文件中引用)npminstallaxios-Saxios发送post请求时默认是直接把json放到请求体中提交到后端的,axios默认的请求头content-type类型是’application/json;charset=utf-8’.content-type的三种常见数据格式://1默认.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

  • axios 是Ajax的一个插件,axios虽然是一个插件,但是我们不需要通过Vue.use(axios)来使用,下载完成后,只需在项目中引入即可。(一般我们放在了请求接口的公共文件中引用)
npm install axios -S
  • axios 发送post请求时默认是直接把 json 放到请求体中提交到后端的,axios默认的请求头content-type类型是’application/json;charset=utf-8’.

  • content-type的三种常见数据格式:

// 1 默认的格式请求体中的数据会以json字符串的形式发送到后端
  'Content-Type: application/json '
// 2 请求体中的数据会以普通表单形式(键值对)发送到后端
  'Content-Type: application/x-www-form-urlencoded'
// 3 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件
  'Content-Type: multipart/form-data'
  • Content-Type: application/json这种参数是默认的就不说了
  • 若后端需要接受的数据类型为:application/x-www-form-urlencoded,我们前端该如何配置:
    1 用 URLSearchParams 传递参数
var param = new URLSearchParams()
  param.append('name',name)
  param.append('age' , age)
axios(
	{
	  method:'post',
	  url: url,
	  data : param,
	}
	).then(res => res).catch(err => err)

2 配置axios请求头中的content-type为指定类型(这个比较常用)

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

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

import Qs from 'qs'
let params= {
    "name": "ll",
    "age": "18"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: url,
    data: Qs.stringify(params)
})
  • 若后端需要接受的数据类型为:Content-Type: multipart/form-data,我们前端该如何配置:
    应用场景:对于这种类型的数据,我们常见前端页面上传个人图像,然后点击保存发送后端修改原始数据
let params = new FormData()
params.append('file', this.file)
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)
        })
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/172671.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • html中表格整体居中,html中怎么把表格居中

    html中把表格居中的方法:首先创建一个HTML示例文件;然后使用table标签创建一个两行两列的表格;接着给table标签添加一个class属性;最后将margin属性设置为“0auto”即可。本文操作环境:windows7系统、HTML5&&CSS3版、DellG3电脑。html怎么让表格在页面居中新建一个html文件,命名为test.html,用于讲解html怎么让表格在…

  • 六大算法之动态规划_动态规划求解最大子数组

    六大算法之动态规划_动态规划求解最大子数组一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。问总共有多少条不同的路径?示例 1:输入:m = 3, n = 7输出:28示例 2:输入:m = 3, n = 2输出:3解释:从左上角开始,总共有 3 条路径可以到达右下角。向右 -> 向下 -> 向下向下 -> 向下 -> 向右向下 -> 向右 -&gt

  • 解决DEDECMS Call to undefined function dede_htmlspecialchars()

    解决DEDECMS Call to undefined function dede_htmlspecialchars()

  • python 字典最外层使用_python字典底层实现

    python 字典最外层使用_python字典底层实现前言问题1:python中的字典到底是有序还是无序问题2:python中字典的效率如何python字典底层原理在Python3.5以前,字典是不能保证顺序的,键值对A先插入字典,键值对B后插

  • 高速数据采集存储系统分类

    随着计算机技术发展,计算机总线速率、处理能力与存储技术得到了快速发展。就存储技术而言相比于五年前,现在不论是传输速率,存储速度与存储容量均有了不同数量级的变化。如现在的PCIeExpress总线可以实现3GB/s(Gen2.0,X8)以上,或6GB/s(Gen3.0,X8)以上的传输速率;而SATA磁盘容量也可以轻易实现动辄几T,多动几十T的规模

  • mysql截取前几个字符串_mysql 截取字符串 函数[通俗易懂]

    mysql截取前几个字符串_mysql 截取字符串 函数[通俗易懂]文章摘取自http://www.cnblogs.com/zdz8207/p/3765073.html练习截取字符串函数(五个)mysql索引从1开始一、mysql截取字符串函数1、left(str,index)从左边第index开始截取2、right(str,index)从右边第index开始截取3、substring(str,index)当index>0从左边开始截取直到结束当ind…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号