[解決済み] return await promise`と`return promise`の違いについて
2022-04-24 01:29:23
質問
以下のコードサンプルで、動作に違いはありますか?あるとすれば、それはどのような違いですか?
return await promise
async function delay1Second() {
return (await delay(1000));
}
return promise
async function delay1Second() {
return delay(1000);
}
私の理解では、1つ目は非同期関数内でエラー処理が行われ、エラーは非同期関数のPromiseからバブルアウトされるでしょう。しかし、2番目は1回少ないtickを必要とします。これは正しいのでしょうか?
このスニペットは、参照用のPromiseを返す一般的な関数に過ぎません。
function delay(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
解決方法は?
の間に観察可能な差がないことがほとんどです。
return
と
return await
. どちらのバージョンも
delay1Second
は観察可能な動作が全く同じです(ただし、実装によっては
return await
を使用するため、若干多くのメモリを消費する可能性があります。
Promise
オブジェクトが作成される可能性があります)。
ただし、@PitaJ さんのご指摘の通り、1つだけ違いがあるケースがあります。
return
または
return await
がネストしている
try
-
catch
ブロックを作成します。この例について考えてみましょう。
async function rejectionWithReturnAwait () {
try {
return await Promise.reject(new Error())
} catch (e) {
return 'Saved!'
}
}
async function rejectionWithReturn () {
try {
return Promise.reject(new Error())
} catch (e) {
return 'Saved!'
}
}
最初のバージョンでは、非同期関数が結果を返す前に拒否されたプロミスを待っているため、拒否が例外になり
catch
このため、この関数は文字列 "Saved!" に解決されるプロミスを返します。
しかし、この関数の2番目のバージョンは、拒否された約束を直接返します。
非同期関数の中で待たずに
ということは
catch
ケースは
ない
が呼び出され、呼び出し元は代わりに拒否を取得します。
関連
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] async」と「await」の使い方とタイミング
-
[解決済み] 非同期関数+await+setTimeoutの組合せ
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
要素ツリー制御によるvueTreeテーブル
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?