After Vue2.0, the official does not continue to maintain vue-resource, especially in the rain the river Axios greatly recommended to replace Ajax.
Axios request header Content-Type common are three kinds:
1.Content-Type:application/json
2.Content-Type:application/x-www-form-urlencoded
3.Content-Type:multipart/form-data
Here one is exemplified.
1.Content-Type: application/json
If not otherwise stated, application / json Axios is the default Content-Type, is my most commonly used, it states that the data volume will be sent a request to the backend as json string. Therefore, when the request, needs to pass the required data to JSON serialization background.
var params = { "range": { "length": 100, "start": 0 }, "branchId": '100001' }; this.$axios.post("/XXXX/XXXX", params).then(data => { //To Do });
We can see the Request Payload in the Google network browser F12, as shown in Fig.
FIG 1 Axios Default Content-Type: application / json
2.Content-Type: application/x-www-form-urlencoded
Content-Type: application / x-www-form-urlencoded, will declare key is sent to the backend of the (general form format) data request body of this type is the default Ajax. Occasionally I need to pass the back-end to give them the keys, that this time, you need to set headers in the head: { 'Content-Type': 'application / x-www-form-urlencoded'},
Then, the data in the request body set pairs. But we request the package body is typically a JSON object, this time, you can use qs library objects into url argument.
Axios default qs is there, you do not need a npm. Its role is twofold: 1 url parameters into the object; url 2 into an object argument...
QS from Import 'QS' ; var URL = 'password = & ADMIN the userId = hellworld' ; // Switch to subject the console.log (qs.parse (URL)); var Person = {name: 'Lihua', Age: 18 is }; // converted url parameter form console.log (qs.stringify (person));
Output shown in FIG. 2 in the browser.
FIG 2 qs role
我比较爱用的就是这种方法,简单粗暴,如图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,则一般用来上传文件,指定传输数据为二进制数据,例如图片、mp3、文件,也可以用来上传键值对。简单写法如下:
<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所示。