小白，请教各位大佬！如何利用async、await来改进函数?跪求！

Question

网上找了一段压缩图片的代码，我把它放到单独的helper.js文件里面，但是由于业务逻辑比较负责，所以不希望用原来的回调来实现，因此希望改进为通过async、await这种形式来避免回调的问题，该怎么改进呢？谢谢！代码如下：exportfunctioncompress(fileObj,callback){try{constimage=newImage();image.src=URL.createObjectURL(fileObj);image.onload=function(){constthat=this;letw=that.width;leth=that.height;constscale=w/h;w=fileObj.width||w;h=fileObj.height||w/scale;letquality=0.7;constcanvas=document.createElement("canvas");constctx=canvas.getContext("2d");constanw=document.createAttribute("width");anw.nodeValue=w;constanh=document.createAttribute("height");anh.nodeValue=h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that,0,0,w,h);if(fileObj.quality&&fileObj.quality0){quality=fileObj.quality;}constdata=canvas.toDataURL("image/jpeg",quality);constnewFile=convertBase64UrlToBlob(data);callback(newFile);//不希望通过此种方式实现};}catch(e){console.log("error!");}}functionconvertBase64UrlToBlob(urlData){constbytes=window.atob(urlData.split(",")[1]);constab=newArrayBuffer(bytes.length);constia=newUint8Array(ab);for(leti=0;i

Answer 1

大致思路，先让compress返回Promise对象，然后声明为async，
exportasyncfunctioncompress(fileObj){
returnnewPromise(
(resolve,reject)=>{
....
constnewFile=convertBase64UrlToBlob(data);
resolve(newFile);
....
catch(e){
console.log("error!");
reject(e);
}
}
);
}