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();
Logo

前往低代码交流专区

更多推荐