ES2015无await场景下如何让外层Promise等待嵌套Image.onload执行完成？

当前实现的时序错位本质是：setSize 方法在 Image.onload 异步回调还没执行的时候，就同步返回了携带未赋值newImage的已完成Promise。整个Promise链路从创建之初就是已完成状态，根本没有等待图片加载的异步流程。
之前尝试把return语句挪到onload内部会报错，是因为这个return语句属于onload回调函数的作用域，setSize方法本身在执行完同步逻辑后没有任何返回值，Invoker层调用setSize拿到的是undefined，自然无法执行后续的.then()流程。

全程使用ES2015原生Promise语法，不需要引入async/await能力，直接改造Inner类的setSize方法，将图片加载的全异步流程包裹在Promise构造函数中：

class Inner extends Component{
    setSize(size){
        // *从setSize方法最外层直接返回Promise实例*，保证Invoker层能立刻拿到合法的可链式调用的Promise
        return new Promise((resolve, reject) => {
            const newImage = { url: null, imageName: canvasImage.imageName};
            // 保留原有所有同步预处理逻辑
            ... some stuff...
            const tempImage = new Image();

            // 补充错误捕获，避免图片加载失败导致Promise永久pending
            tempImage.onerror = (error) => {
                reject(new Error(`图片加载失败：${error.message}`));
            }

            tempImage.onload = function(){
                // 保留原有onload回调内的所有处理逻辑
                ... some stuff...
                const tempCanvas = document.createElement("canvas");
                const tempCtx = tempCanvas.getContext("2d");
                tempCtx.drawImage(image, x, y, xa, ya);
                newImage.url = tempCanvas.toDataURL();

                // 等onload内所有逻辑执行完成、newImage的url字段赋值完毕后，再触发Promise的resolve
                resolve(newImage);
            }

            // 触发图片加载流程
            tempImage.src = canvas.toDataURL();
        })
    }
}

• 方法返回值层面：setSize从外层就返回了Promise实例，Invoker层在调用方法时立刻就能拿到合法返回值，不会出现之前拿不到Promise、调用.then()报错的问题
• 时序对齐层面：整个Promise的状态会一直保持pending，直到Image.onload回调内所有逻辑执行完成，手动调用resolve后才会切换为完成状态，后续Main类resize方法里的.then()回调、Invoker内的clearRedoStack()逻辑，都会等图片加载、canvas处理完成后再执行
• 错误处理层面：补充了Image加载的错误捕获，避免跨域、图片资源异常等场景导致的流程卡死

• 不要将Promise.resolve()的返回值作为setSize的提前返回，这种写法只能处理同步值，无法关联onload的异步流程
• 不要把resolve、return语句放在异步回调的作用域中就期待外层能拿到返回值，JS的作用域规则决定了回调内的return只会返回给回调自身的调用方，不会穿透到外层方法

内容的提问来源于stack exchange，提问作者Andreas