双重for循环解决异步请求

前几天就写到了canvas绘制地图，但是在计算出地理范围之后，在请求对应图片和绘制的过程中，遇到了异步的问题。一直没解决，最后花了20块大洋才解决了。下面记录一下如何使用es6语法来解决异步。传统的回调方式解决的方法后续补上。

  //开始绘制
    let disTop=0;
     function draw(i1,j1) {
        return new Promise((resolve,reject) =>{
            disTop=i1*256;
           
            var img = new Image();
            img.src = `https://c.tile.openstreetmap.org/${zoom}/${i1}/${j1}.png`;
            img.οnlοad=function(){
                console.log("绘制"+j1*256,disTop)
                ctx.drawImage(img, disTop,j1*256);
                resolve()

            }
        })

    }
    (async function () {
        for(let i=0;i<=fixedTileLeftTopNumX;i++){
            for(let j=0;j<=fixedTileLeftTopNumY;j++){
               await draw(i,j)
            }
        }

    })()