Vue中使用Promise.all()方法，进行同步多次请求

姜天生i

已于 2022-07-25 14:37:15 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： ES6 Vue 文章标签： vue.js javascript Promise

于 2022-07-25 14:19:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37041819/article/details/125504004

在Vue项目中，为了获取所有图片URL，针对同一接口进行了循环请求。使用Promise.all()确保所有请求完成后才处理数据并展示，解决了图片加载慢导致的页面显示不完整的问题，提升了用户体验。

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

项目中要根据图片的name，来查询所有图片的url
我需要对同一个接口循环发送多个请求
必须等所有结果返回后，再处理数据，并展示

如下代码为tab点击测试2时使用的

async getAntigenData() {
   
   
            let obj = {
   
   
                pageNum: this.pageNum,
                pageSize: 10,
            }
            getshopMyAntigenRecord(obj).then(res => {
   
   
                if (res.code == 0) {
   
   
                    let antigenArr = res.result.records
                    antigenArr.filter(item => {
   
   
                        getImgUrl({
   
    fileName: item.pic }).then(res => {
   
   
                            var base64