vue2 有多个已经封装的接口 使用promise.all 访问多个接口
时间: 2024-02-18 08:58:59 浏览: 227
在 Vue2 中使用 `Promise.all` 访问多个已经封装的接口可以这样实现:
假设我们有三个已经封装好的接口 `getUserInfo`、`getPostList` 和 `getCommentList`,它们的调用方式类似于:
```javascript
getUserInfo()
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误情况
})
getPostList()
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误情况
})
getCommentList()
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误情况
})
```
我们可以将这些接口的 Promise 对象放入一个数组中,然后使用 `Promise.all` 执行这些 Promise,等待所有 Promise 都成功完成后,`then` 方法中的回调函数就会被执行,此时的 `responses` 数组包含了所有接口的响应数据。代码如下:
```javascript
const promiseArray = [
getUserInfo(),
getPostList(),
getCommentList()
]
Promise.all(promiseArray)
.then(responses => {
const userInfo = responses[0].data
const postList = responses[1].data
const commentList = responses[2].data
console.log(userInfo, postList, commentList)
})
.catch(error => {
console.log(error)
})
```
以上代码中,`promiseArray` 数组里包含了多个已经封装好的接口的 Promise 对象,使用 `Promise.all` 执行这些 Promise,等待所有 Promise 都成功完成后,`then` 方法中的回调函数就会被执行,此时的 `responses` 数组包含了所有接口的响应数据。可以根据需要修改相应的变量名和处理响应数据的代码。
阅读全文