Javascript 图像加载中的异步等待
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46399223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
async await in image loading
提问by Rahul
Temp.js
临时文件
export default class Temp {
async addImageProcess(src){
let img = new Image();
img.src = src;
return img.onload = await function(){
return this.height;
}
}
}
anotherfile.js
另一个文件.js
import Temp from '../../classes/Temp'
let tmp = new Temp()
imageUrl ="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"
let image = tmp.addImageProcess(imageUrl);
console.log(image)
Above is my code. I have a image url and tried to get image's properties using async await but it's not working, don't understand what I missed.
以上是我的代码。我有一个图像 url 并尝试使用 async await 获取图像的属性，但它不起作用，不明白我错过了什么。
回答by Phil
Your problem here extends from the definition for await...
您这里的问题来自...的定义await
The
awaitoperator is used to wait for aPromise
该
await运算符用于等待Promise
The Image.prototype.onloadproperty is not a promise, nor are you assigning it one. If you're wanting to return the heightproperty after loading, I would instead create a Promise...
该Image.prototype.onload属性不是一个承诺，您也不是将其分配给它。如果你想height在加载后返回属性，我会创建一个Promise......
addImageProcess(src){
return new Promise((resolve, reject) => {
let img = new Image()
img.onload = () => resolve(img.height)
img.onerror = reject
img.src = src
})
}
You would then use the following to access that value
然后，您将使用以下内容访问该值
tmp.addImageProcess(imageUrl).then(height => {
console.log(height)
})
or, if within an asyncfunction
或者，如果在async函数内
async function logImageHeight(imageUrl) {
console.log('height', await tmp.addImageProcess(imageUrl))
}
回答by Pinna_be
While the proposed solution works perfect, I want to be able to avoid writing promises for every asynchronous function, so I wrote a generic utility function just for this purpose:
虽然提议的解决方案工作完美，但我希望能够避免为每个异步函数编写承诺，因此我为此编写了一个通用实用程序函数：
in javascript
在 JavaScript 中
function onload2promise(obj){
return new Promise((resolve, reject) => {
obj.onload = () => resolve(obj);
obj.onerror = reject;
});
}
in typescript (including some generic typechecks):
在打字稿中（包括一些通用类型检查）：
interface OnLoadAble {
onload: any;
}
function onload2promise<T extends OnLoadAble>(obj: T): Promise<T> {
return new Promise((resolve, reject) => {
obj.onload = () => resolve(obj);
obj.onerror = reject;
});
}
In the example of the question, you can now do:
在问题的示例中，您现在可以执行以下操作：
async function addImageProcess(src){
let img = new Image();
let imgpromise = onload2promise(img); // see comment of T S why you should do it this way.
img.src = src;
await imgpromise;
return this.height;
}
Off course, the call in anotherfile.jsshould still happen asynchronously as well, as explained in the last codeblock of Phils answer
当然，anotherfile.js 中的调用仍然应该异步发生，如 Phils answer 的最后一个代码块所述
