vue系列：使用URLSearchParams处理axios的请求数据

使用 axios 发送数据的时候，有时会遇到格式不正确的问题，例如

axios({
     
	method: 'post',
	url: '/test',
	data: {
     
		name: 'li',
		age: 18
	}
})

得到的这样的格式：

我们用 jquery 的 ajax 的数据格式是这样的：

修改

首先修改请求头，然后把数据用 URLSearchParams 转换一下就好啦。

transParams = (data) => {
     
  let params = new URLSearchParams();
  for (let item in data) {
     
    params.append(item, data['' + item + '']);
  }
  return params;
};

let params = {
     
	name: 'li',
	age: 18
},
axios({
     
	method: 'post',
	url: '/test',
	data: transParams(params)
	headers: {
     
		'Content-Type': 'application/x-www-form-urlencoded'
	}
})

URLSearchParams

怕不兼容的话可以用这个https://github.com/jerrybendy/url-search-params-polyfill/

URLSearchParams 接口定义了很多个用来处理 URL 参数串的方法。
基本使用方法如下

var paramsString = "q=URLUtils.searchParams&topic=api"  // location.search.slice(1)
var searchParams = new URLSearchParams(paramsString);

searchParams.has('topic') // true
searchParams.get('topic') // "api"
searchParams.getAll('topic') // ["api"]

searchParams.get('foo') // null，注意Firefox返回空字符串
searchParams.set('foo', 2);
searchParams.get('foo') // 2

searchParams.append('topic', 'webdev');
searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"

searchParams.append('foo', 3);
searchParams.getAll('foo') // [2, 3]

searchParams.delete('topic');
searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"

DOM 的 a 元素节点的 searchParams 属性，就是一个 URLSearchParams 实例。

var a = document.createElement('a');
a.href = 'https://example.com?filter=api';
a.searchParams.get('filter') // "api"