axios的使用小技巧：如何绕过字符串拼接，直接传递对象

 Vue.js官方推荐使用axios作为发送http请求的工具，在使用axios中，有些小技巧是不容易发现的。当我们不知道这些技巧时，我们可能会使用其他“奇技淫巧”，比如，我们很容易会忽略axios默认支持get请求传递对象的事实，然后采用手动拼接、第三方库、或手动编写函数的方式将对象转换为查询参数，拼接成最终的url地址。

 事实上，axios是支持直接传递对象的，根本无需做费神的相关拼接工作，更无需引入第三方库。

给get请求直接传递对象

axios中给get请求直接传递对象的方式是：

给GET请求传递第二个参数，第二个参数是一个对象，第二个参数的params属性设置为要传递的对象。

this.axios.get(url,{
	params:{a:1,b:2} })
.then(resp => {})
.catch();

这样params属性的对象都将会拼接到url上，成为url?a=1&b=2的形式。

(这里假设axios被放在了Vue的prototype上，通过this.axios调用，后面的例子相同)

给需要拼接url的POST请求直接传递对象

使用axios发送post请求最常见的方式是

this.axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
 })
 .then(resp =>{})
 .catch()

这里并不需要字符串拼接，不再赘述。

对于另一种情况，如果post请求的url需要像get那样拼接，那么显然不能像上面那样操作。

这时，可以有更加巧妙的方式：

方式一：

this.axios.post(url,null,{
	params:{a:1,b:2} })
.then(resp => {})
.catch();

第二个参数写成null是指只需要拼接url的情况，如果需要传其他数据，直接写成要传的对象即可。

方式二：

这里，还有一种方式也可以实现,稍微复杂：

this.post(url,{a:1,b:2},
{
	transformRequest: [function (data) {
		let params ='';
		for(let key in data){
			params += `${key}=${data[key]}&`
		};
		return params;
	}]
})
.then(resp => {})
.catch();