22/09/27 vue3,在for循环中同步获取异步函数数据

最新推荐文章于 2024-03-08 15:41:33 发布

六月要好好加油呀

最新推荐文章于 2024-03-08 15:41:33 发布

阅读量1.1k

点赞数

分类专栏： # vue3 # bug知识点记录文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Nighsloth/article/details/127068796

版权

bug知识点记录同时被 2 个专栏收录

25 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍了一种使用 Promise 实现的异步请求方法，通过循环请求分页数据并确保最终数据按正确顺序显示的方法。利用 Promise.all 处理并发请求，有效解决了因异步请求导致的数据顺序错乱问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：
做进度条回显，比如获取三页的数据，但是循环获取分页数据的时候，有可能是先拿到第二页，再拿到第一页数据，这样排序获得的数据顺序就不对。

代码：

//循环获得的分页 页码数据
 for (let index = 0; index < boxStatus.pageIndex; index++) {
            pageIndex.value = index + 1;
            // console.log('pageIndex', pageIndex.value);
            positionPageIndexArr.value.push(pageIndex.value)
        }
//获取每次分页请求的数据
const getAllValue=async()=>{
//每一个页码的请求
const itemPromise = positionPageIndexArr.value.map(i => {
    let pageParams = { user_id: curUser.objectId, page_size: pageSize.value, page_index: i };
    return new Promise((resolve, reject) => {
        request.post(`${nftShopApi}/blind_box/info`, pageParams).then(res => resolve(res)).catch(err => reject(err))
    })
})
//所有请求的集合
    const itemGroup = await Promise.all(itemPromise)
//拿到所有数据的操作
if(itemGroup){//操作}
}

参考链接：
前端js使用promise循环多个异步请求并发，并处理其结果