異步的圖片加載等待

Question

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

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) 

以上是我的代碼。我有一個圖片網址，並嘗試使用異步等待圖片的屬性，但它不工作，不明白我錯過了什麼。

Answer 1

你的問題就在這裏，從the definition for await延伸......

的await運算符用於等待Promise

的Image.prototype.onload屬性不是一個承諾，也沒有將它分配一個。如果你想返回裝車後height財產，我反而創造一個Promise ...

你會然後用下面的訪問值

tmp.addImageProcess(imageUrl).then(height => { 
    console.log(height) 
}) 

，或者，如果內

addImageProcess(src){ 
    return new Promise((resolve, reject) => { 
    let img = new Image() 
    img.onload =() => resolve(img.height) 
    img.onerror = reject 
    img.src = src 
    }) 
} 

一個 async功能

async function logImageHeight(imageUrl) { 
    console.log('height', await tmp.addImageProcess(imageUrl)) 
}