实现遍历异步函数for await of (图片加载canvas绘图)

示例：
以下为核心代码：
1.异步加载图片的组件

<Image
    style={{width: '100%', height: '120px'}}
     src={item.image}
     preview={{
         src: imageUrl,
         visible: !!imageUrl,
         onVisibleChange: (visible, prevVisible) => {
             console.log(visible, prevVisible)
             if (visible) {
                 imageClick(item);
             } else {
                 setImageUrl('')
             }
         }
     }}
 />

2.事件

const imageClick = (imgurl: any) => {
        let iamgeUrl = imgurl.snapUrl.split('?')[0]
        let iamgeXY = imgurl.snapUrl.split('?')[1].slice(2, imgurl.snapUrl.split('?')[1].length)
        let xyregion = JSON.parse(window.atob(iamgeXY))
        var imgObject: any = document.getElementById("img2");
        canvasRaceUrlXY(iamgeUrl, xyregion, imgObject).then((res: any) => {
            setImageUrl(res as any)
        })
    }

3.异步取值canvas绘图

export const canvasRaceUrlXY = (url: any, xyregion: any, imgObject: any) => {
    return new Promise((res, rej) => {
        if (xyregion.length > 0) {
            imgObject.crossOrigin = 'Anonymous';
            imgObject.onload = (e: any) => {
                var canvas = document.createElement('canvas')
                canvas.id = 'canvas'
                var ctx: any = canvas.getContext('2d')
                let width1 = imgObject.width
                let height1 = imgObject.height
                let scaleX = Math.floor(imgObject.naturalWidth * 100 / width1) / 100
                let scaleY = Math.floor(imgObject.naturalHeight * 100 / height1) / 100
                canvas.width = width1
                canvas.height = height1
                ctx.drawImage(imgObject, 0, 0, width1, height1)
                ctx.strokeStyle = "#f00";
                ctx.lineWidth = 1;
                xyregion.forEach((item: any) => {
                    var width = Math.abs(item.x1 / scaleX - item.x2 / scaleX);
                    var height = Math.abs(item.y1 / scaleY - item.y2 / scaleY);
                    ctx.rect(item.x1 / scaleX, item.y1 / scaleY, width, height);
                    ctx.stroke();
                })
                let dataURL: any = canvas.toDataURL('image/png');
                res(dataURL)
            }
            imgObject.src = 'http://10.88.1.118' + url;  // 测试
            // imgObject.src = url;
        }
    })
}

4. 调用

// 实时事件渲染
    useEffect(() => {
        let eventListNowday = JSON.stringify(reduxData.DeviceInfo.eventListNowday)
        let eventNewList = JSON.parse(eventListNowday)
        eventNewList.forEach((item: any) => {
            // item.image = 'http://10.88.1.118' + item.snapUrl?.split('?')[0]  // 测试
            item.image =  webUrl.split(':')[0] + item.snapUrl?.split('?')[0]
            item.location = item.deviceName
        })
        if (eventNewList.length <= 5 && eventNewList.length > 0) {
            let arr = eventNewList.splice(0, eventNewList.length)
            imageToCanvas(arr)

        } else {
            setFrontThreeData(eventNewList.splice(0, 5))
        }

    }, [reduxData.DeviceInfo.eventListNowday])
// 异步加载canvas
    const imageToCanvas = async (arr:any) =>{
        for await (const imgurl of arr){
            let iamgeUrl = imgurl.snapUrl.split('?')[0]
            let iamgeXY = imgurl.snapUrl.split('?')[1].slice(2, imgurl.snapUrl.split('?')[1].length)
            let xyregion = JSON.parse(window.atob(iamgeXY))
            var imgObject: any = document.getElementById("img2");
            const res = await canvasRaceUrlXY(iamgeUrl, xyregion, imgObject)
            imgurl.image = res
        }
        setFrontThreeData(arr)
    }