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); });
最后提醒一点,当传递参数是数组或对象类型时,需要对参数进行序列化处理。