axios的使用小技巧:如何绕过字符串拼接,直接传递对象
Vue.js官方推荐使用axios作为发送http请求的工具,在使用axios中,有些小技巧是不容易发现的。当我们不知道这些技巧时,我们可能会使用其他“奇技淫巧”,比如,我们很容易会忽略axios默认支持get请求传递对象的事实,然后采用手动拼接、第三方库、或手动编写函数的方式将对象转换为查询参数,拼接成最终的url地址。 事实上,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();
更多推荐
所有评论(0)