vue3使用axios通过api怎么能同时获取多条数据
时间: 2023-12-03 20:45:52 浏览: 173
vue+axios+mock.js环境搭建的方法步骤
可以使用 Promise.all() 方法来同时获取多条数据。Promise.all() 接收一个由 Promise 对象组成的数组,返回一个新的 Promise 对象,当所有 Promise 对象都成功时,该 Promise 对象才会成功。
举个例子,假设我们有两个接口需要同时请求:
```javascript
import axios from 'axios'
const api1 = '/api/users'
const api2 = '/api/posts'
const promise1 = axios.get(api1)
const promise2 = axios.get(api2)
Promise.all([promise1, promise2])
.then(([res1, res2]) => {
console.log(res1.data) // 用户列表数据
console.log(res2.data) // 文章列表数据
})
.catch(error => {
console.log(error)
})
```
在上面的代码中,我们先定义了两个接口的地址,然后分别发送请求,并把 Promise 对象保存到变量 `promise1` 和 `promise2` 中。接着,我们使用 Promise.all([promise1, promise2]) 方法来同时获取这两个接口的数据。当两个接口的数据都成功返回后,Promise.all() 会把两个 Promise 对象的结果封装成一个数组 `[res1, res2]` 并传递给 `.then()` 方法。最后我们在 `.then()` 方法中打印出了这两个接口的数据。
需要注意的是,如果两个接口中的任意一个接口失败,那么 Promise.all() 返回的 Promise 对象就会被拒绝,并且只会捕获到第一个被拒绝的 Promise 错误。
阅读全文