关于async调用的问题

Question

switch (oneExe.ExeInfo.ET) {      
            case "Subjective": {
                Subjective.draw(oneExe, '', this.json_nowTypeset).then((div) => {
                    str_insertHTML += div
                })
                break;
            }
}      

我的draw是async函数，每次当break的时候上面的方法还没有运行，导致str_insertHTML为空，

如果我把draw中的需要awiat的img.onload那个方法单独写出来，之后onload执行完毕后返回值，然后再在draw中使用的话，这样可不可以直接让上述代码变成同步的，如果这么写的话是将onload写在一个async吗，还是说是写成promise

第一次写async，对于异步真的是刚开始学习没多久，求大佬们指教 TvT

补充一下draw的大致代码

    draw: async function (json_exe, parentId) {
        let answer_height = 0

        let answer_div = document.createElement('div');
        answer_div.innerHTML = json_exe.ExeInfo.SubjectiveAnswer;
        //大概高度（p标签的个数*一个p标签30的高）
        answer_height = answer_div.children.length * this.subject_row_height
        
            for (let i = 0; i < answer_div.children.length; i++) {
                //是否存在图片，如果存在则获取图片的高度
                let answer_img = answer_div.children[i].getElementsByTagName("img")
                if (answer_img.length === 1) {
                    await new Promise((resolve) => {
                        let img = new Image()
                        img.src = answer_img[0].src
                        answer_height -= this.subject_row_height
                        img.onload = function () {
                            answer_height += img.height
                            resolve(answer_height)
                        }
                    })
                }
            }
        
        let div = document.createElement('div')
        div.setAttribute('style', `height:${answer_height}px`)
        return div
    }

Answer 1

异步就是异步，不可能变成同步。async / await 就是个语法糖，并不改变异步的实质。你要是写不明白，不如老老实实地写 Promise。

let p; // `p` is a Promise
await p;
console.log('done');

就等同于：

let p; // `p` is a Promise
p.then(() => {
   console.log('done');
});

---

Image.onload 是回调，连 Promise 都不是，怎么可能写 async？你只能包一层：

let p = new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = (e) => resolve(e);
    img.onerror = (err) => reject(err);
    img.src = 'balabala';
});