ホームページ >ウェブフロントエンド >jsチュートリアル >async/await を使用して画像読み込みコールバックを Promise に変換する方法
async/await を使用したコールバックの Promise への変換
コールバックは、非同期コードを処理する便利な方法を提供します。ただし、async/await で Promise を使用すると、コードの可読性と保守性の点で利点が得られます。この質問は、画像の幅と高さを読み込むコールバック関数を Promise ベースの実装に変換するという課題に対処します。
提供されたコールバック関数 getImageData は、自然な幅を返します。ロードが完了したときの画像の高さ。ただし、次の例に示すように非同期で呼び出された場合:
ready () { console.log(getImageData(this.url)) }
コールバックはすぐに実行されますが、イメージのロードには時間がかかるため、返される値は未定義です。これを解決するには、Promise コンストラクターを使用して、イメージが読み込まれると解決される Promise を作成します。 Promise として更新された getImageData 関数は次のとおりです。
function getImageData(url) { return new Promise((resolve, reject) => { const img = new Image(); img.addEventListener('load', () => { resolve({ width: img.naturalWidth, height: img.naturalHeight }); }); img.addEventListener('error', reject); // Handle errors here img.src = url; }); }
この Promise ベースの関数では、async/await を使用して getImageData の実行を遅延させ、ロードされた画像の実際の幅と高さを取得できるようになりました。
async function ready() { const imageData = await getImageData(this.url); console.log(imageData); }
このコードにより、画像が完全にロードされ、その幅と高さが利用可能になった後にのみコンソール ログが実行されることが保証されます。
以上がasync/await を使用して画像読み込みコールバックを Promise に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。