一、Vue中Get请求传参
在Vue中进行Get请求时,传递参数是一个必不可少的过程。我们可以通过url后面加上请求参数来传递基本类型(如字符串、数字等)参数。例如:
axios.get('/api/getData?id=1&name=Tom')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
如果要传递多个参数,可以使用"&"将多个参数拼接起来。
二、Vue中Get请求的写法
在Vue中可以使用axios来发送Get请求,它是一个基于Promise的HTTP库,可以用在浏览器和Node.js中。
使用axios发送Get请求的写法如下:
axios.get('/api/getData')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
这里的'/api/getData'表示访问的地址,后端接收这个请求后返回响应数据。
三、Vue中Get请求传递参数
如果要在Vue中以参数形式传递对象或者数组,需要在请求时使用params参数传递。例如:
// 传递对象
axios.get('/api/getData', {
params: {
id: 1,
name: 'Tom'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 传递数组
axios.get('/api/getData', {
params: {
ids: [1, 2, 3]
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
四、Vue中Get请求url跟一个对象
如果我们想要在Vue中Get请求时,将参数放到请求url后面,且只有一个对象作为参数传递。这时我们可以使用qs库,qs库是一个处理URL查询字符串的js库。
// 首先安装qs库
npm install qs
// 然后在代码中引入qs库
import qs from 'qs'
// Get请求url跟一个对象
axios.get('/api/getData?' + qs.stringify({
id: 1,
name: 'Tom'
}))
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
五、Vue中Get请求传多个不同类型参数
如果我们需要在Vue中Get请求时,传递多个不同类型的参数,包括字符串、布尔值、数字等,我们可以使用params参数传递。
axios.get('/api/getData', {
params: {
id: 1,
name: 'Tom',
isVip: true,
age: 30
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
六、Vue中Put请求
在Vue中进行Put请求,可以使用axios库,与Get请求的使用基本相同,只需将get改为put,其他参数不变。例如:
axios.put('/api/updateData', {
id: 1,
name: 'Tom'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
七、Vue请求数据
在Vue中请求数据有多种方式,其中Get请求是最基本的一种方式,可以应用于大多数场景。除此之外还有Post、Put、Delete等请求方式可以使用,具体使用方法请参考axios文档。
八、Vue请求后端数据
在Vue中请求后端数据的过程其实很简单,只需要将后端的接口地址作为请求地址即可。例如:
// 后端接口地址为'/api/getData'
axios.get('/api/getData')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
注意:请确保后端已经开启了相关的接口服务,否则会无法请求到数据。