vue2 mounted同时调用接口传不同的参数
时间: 2023-10-19 16:17:26 浏览: 177
vue2 router 动态传参,多个参数的实例
在 Vue2 中,您可以在 `mounted` 钩子函数中调用接口,同时传递不同的参数。具体实现方法如下:
1. 在 `data` 中定义需要传递的参数数组 `params` ,比如:
```javascript
data() {
return {
params: [
{ paramA: 'valueA1', paramB: 'valueB1' },
{ paramA: 'valueA2', paramB: 'valueB2' }
],
dataList: []
}
}
```
2. 在 `mounted` 中循环遍历参数数组,调用接口并传递不同的参数:
```javascript
mounted() {
this.params.forEach(param => {
const url = 'your-api-url'
axios.get(url, { params: param })
.then(response => {
this.dataList.push(response.data)
})
.catch(error => {
console.error(error)
})
})
}
```
在上面的代码中,我们定义了一个参数数组 `params`,包含了需要传递的不同参数值。在 `mounted` 钩子函数中,我们遍历 `params` 数组,并使用 `axios` 发送 GET 请求,同时将当前遍历到的参数对象作为请求参数传递给后端。当后端返回数据时,我们将其保存在 `dataList` 数组中,以便在页面上展示。
需要注意的是,由于接口调用是异步的,因此返回的数据的顺序可能与参数数组中的顺序不一致。如果需要保证数据的顺序与参数数组一致,可以在发送请求时,将参数数组的索引作为参数一起传递给后端,后端返回时再将索引一起返回,前端在接收数据时根据索引进行排序。
阅读全文