前端根据后台数据异步加载图片并按时间保持顺序

前言

前几天做一个小程序，里面有附件列表，但是格式不一，需要过滤出里面的图片，然后根据它的id去异步请求后台，但是发现每次返回的顺序还不一样，于是查阅了资料找到了解决办法，后面还有实现点击加载更多的功能。

view部分代码

<view :class="myDealList.length === 0 ? 'panel-content no-pad' : 'panel-content'">
			<view class="list-item" v-for="(item,index) in myDealList" :key="index">
				<view class="problem-item">
					<view class="top-content">
						<view class="list-left">
							...
						</view>
						<view class="list-right">
							<image src="../../../static/images/main/no-pic.png" v-if="item.imgSrc === ''"></image>
							<image v-else :src="item.imgSrc" style="width: 240rpx;height: 160rpx;" mode="aspectFill">
							</image>
						</view> 
					</view>
					<view class="btn-area">
						...
					</view>
				</view>
				
			</view>
			<noData showText="没有数据了~" v-if="myDealList.length === 0"></noData>
			<u-loadmore :status="status" @loadmore="loadmore" loadmoreText='点击加载更多' v-else></u-loadmore>

拿到后台数据后进行变形

getMyWarning() {
	this.load = true
	let oldDealList = []
    this.HTTPUTILS.httpPost('/api/problem/list', this.form, true)
      .then(async res => {
        const oldDealList = res?.records.map(item => ({
          id: item.id,
          title: item.title,
          ...
          alarmPhoto: this.filterAndMarkFiles(item.annexs),
		  imgSrc:''
        }));
    
        // 使用 Promise.all 等待所有异步操作完成，并为每个对象添加 imgSrc 属性
        await Promise.all(oldDealList.map(async item => {
          if (item.alarmPhoto) {
            item.imgSrc = await this.getImg(item.alarmPhoto);
          }
        }));
    
		//对象复制
		this.oldFormData = JSON.parse(JSON.stringify(oldDealList))
		this.infoListTotal.push(...this.oldFormData)
		this.myDealList = this.infoListTotal
		
		this.load = false
		this.total = res.total
		if (this.myDealList.length == res.total) {
			//并将状态码改为nomore，没有更多了
			this.status = 'nomore'
		} else {
			this.status = 'loadmore'
		}
		if (res?.records?.length === 0) {
			//并将状态码改为nomore，没有更多了
			this.load = false
		}
	})
}, 

异步加载图片

//获取告警图片
async getImg(imgId) {
		try {
		    const res = await this.HTTPUTILS.httpJsonGet('/api/file/sysFile/getViewUrl?id=' + imgId);
		    return res;
		  } catch (error) {
		    //console.error('获取图片URL失败', error);
		    return null;
		  }
	},
			

过滤图片的方法

filterAndMarkFiles(arr) {
	 //展示图片
	 const imageAndPdfRegex = /\.(jpg|jpeg|png|svg)$/i;
		  const filteredFiles = arr.filter(file => imageAndPdfRegex.test(file.fileOriginName));
		  if(filteredFiles.length > 0) {
			 return filteredFiles[0]?.fileId
		  }
	},

加载更多

loadmore() {
	if(this.myDealList.length < this.total) {
		// 每次出发该方法，都要使页数加一
		this.form.pageNo ++
		// 页数加一后，在调用getList方法，获取下一页的数据
		this.getMyWarning();
	}else {
		this.status = 'nomore'
	}
},

结语

写代码容易脑袋卡壳，记一记，下一次过来粘贴复制就好了~