淘先锋技术网

首页 1 2 3 4 5 6 7

Vue中的http请求可以使用官方推荐的axios库来实现。而对于http传参,也有多种方法可以选择。

最简单的方式是使用get请求,直接在请求的url中拼接参数。例如:

axios.get('/api/user?id=123')
.then(response =>{
console.log(response.data);
})
.catch(error =>{
console.log(error);
});

当然,如果存在多个参数需要传递,则需要手动拼接。这时可以使用qs库来实现。如下代码:

import qs from 'qs';
axios.get('/api/user', {
params: qs.stringify({
id: 123,
name: '张三'
})
})
.then(response =>{
console.log(response.data);
})
.catch(error =>{
console.log(error);
});

如果是使用post请求,则可以直接将数据放在请求体中,使用Content-Type为application/x-www-form-urlencoded方式提交。如下代码:

import qs from 'qs';
axios.post('/api/user', qs.stringify({
id: 123,
name: '张三'
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(response =>{
console.log(response.data);
})
.catch(error =>{
console.log(error);
});

还可以使用FormData对象来实现post请求参数传递。如下代码:

let data = new FormData();
data.append('id', 123);
data.append('name', '张三');
axios.post('/api/user', data)
.then(response =>{
console.log(response.data);
})
.catch(error =>{
console.log(error);
});

如果提交的是JSON数据,则可以使用Content-Type为application/json方式提交。如下代码:

axios.post('/api/user', {
id: 123,
name: '张三'
}, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response =>{
console.log(response.data);
})
.catch(error =>{
console.log(error);
});

最后提醒一点,当传递参数是数组或对象类型时,需要对参数进行序列化处理。