Axios请求头中常见的Content-Type及其使用

　　Vue2.0以后，官方再也不继续维护vue-resource，尤雨溪大大推荐使用Axios用来替代Ajax。javascript

　　Axios请求头中的Content-Type常见的有3种：html

　　　　1.Content-Type:application/jsonvue

　　　　2.Content-Type:application/x-www-form-urlencodedjava

　　　　3.Content-Type:multipart/form-dataios

　　这里一个个来举例说明。chrome

1.Content-Type: application/jsonnpm

　　若是没有特别声明，application/json是Axios默认的Content-Type，也是我最经常使用的一种，它声明了请求体中的数据将会以json字符串的形式发送到后端。因此，在请求的时候，须要将须要传给后台的数据JSON序列化便可。json

var params = { "range": { "length": 100, "start": 0 }, "branchId": '100001' }; this.$axios.post("/XXXX/XXXX", params).then(data => { //To Do
});

　　咱们能够在谷歌浏览器F12的network中看到Request Payload，如图1所示。axios

图1 Axios默认Content-Type:application/json后端

2.Content-Type: application/x-www-form-urlencoded

　　Content-Type:application/x-www-form-urlencoded，则声明了请求体中的数据会以键值对（普通表单形式）发送到后端，这种类型是Ajax默认的。偶尔后端须要我要传键值对给他们，那这个时候，就须要在头部设置headers: { 'Content-Type':'application/x-www-form-urlencoded'},

而后，将请求体中的数据设置为键值对。可是咱们封装的请求体通常是JSON对象，这个时候，就可使用qs库将对象转为url参数形式。

　　qs是Axios默认就有的，就不须要再npm了。其做用有二：1.将url中的参数转为对象；2.将对象转为url参数形式。

import qs from 'qs'; var url='userId=admin&password=hellworld'; // 转为对象
console.log(qs.parse(url)); var person = {name:'lihua',age:18}; // 转为url参数形式
console.log(qs.stringify(person));

在浏览器输出如图2所示。

图2 qs的做用

　　我比较爱用的就是这种方法，简单粗暴，如图3所示。在谷歌浏览器F12的network中Form Data，如图4所示。

import qs from 'qs'
var data = {
    "username": "admin",
    "password": "123456"
}

axios({
    url: '/OAuth/oauth/token',
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
})

图3 我在工程中的对application/x-www-form-urlencoded的使用

图4 AjAx默认Content-Type:application/x-www-form-urlencoded

　　有一次出现的一个问题，以为有必要记录一下。一旦使用qs库的方法，就应该注意不能对请求体中的数据使用扩展运算符。不然，你就会看到请求体种出现如图5的状况。

图5 formdata展现请求体出现神奇的现象

　　能够看到图3，这个request实例是从'@/plugin/axios'中定义出来的，咱们去看这个'@/plugin/axios'里的请求拦截部分service.interceptors.request.use()，很容易就看出问题了，问题就出在这三个点上，如图6所示：扩展运算符将一个数组、类数组、字符串转化为用逗号分隔的序列。

图6 qs库方法的时候请勿与扩展运算符共同使用

还有一种方法就是使用URLSearchParams对象，写法以下：

let data = new URLSearchParams(); data.append('username', 'admin'); data.append('password', '123456'); axios({ url: '/OAuth/oauth/token', method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: data })

3.Content-Type: multipart/form-data

　　Content-Type:multipart/form-data，则通常用来上传文件，指定传输数据为二进制数据，例如图片、mp三、文件，也能够用来上传键值对。简单写法以下：

<input type="file" />
 let data = new FormData(); data.append('userfile', document.querySelector('input[type=file]').files[0]); data.append('username', 'admin'); data.append('password', '123456'); axios({ url: '/XXXX/XXXX', method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data: data })

　　这里说点题外话，Request Payload翻译过来就是请求载荷，就是一种载体。可是我百度了好久也没找到它的定义，最后终于在stackoverflow上发现一个大佬lefloh给出了他的理解获得了你们的支持，你们有兴趣能够去看看，连接在此：https://stackoverflow.com/questions/23118249/whats-the-difference-between-request-payload-vs-form-data-as-seen-in-chrome；

　　大体意思就是你正常发起的一个请求，浏览器都会简单的将你提交的内容展现出来。所展现的内容只是由于Content-Type设置的不一样，而并非由于数据提交方式的不一样。若是一个请求的header设置为Content-Type:application/json，那么浏览器就会以Request Payload来显示你的请求体，因此基本数据格式为JSON对象，如图1所示；若是一个请求被设置为method="post"，而且请求的header设置为Content-Type:application/x-www-form-urlencoded或者Content-Type:multipart/form-data，那么浏览器就会以Request Payload来显示你的请求体，因此基本数据格式为键值对，如图4所示。

原文出处：https://www.cnblogs.com/jdWu-d/p/12036528.html