[解決済み] 早期解決・早期却下の後、戻る必要はありますか?
質問
以下のようなコードがあったとします。
function divide(numerator, denominator) {
return new Promise((resolve, reject) => {
if(denominator === 0){
reject("Cannot divide by 0");
return; //superfluous?
}
resolve(numerator / denominator);
});
}
もし、私の目的が
reject
を使う習慣を身につけるべきでしょうか。
return
この後、すぐにでも?
解決方法は?
その
return
の目的は、拒絶の後に関数の実行を終了させ、その後に続くコードの実行を防止することです。
function divide(numerator, denominator) {
return new Promise((resolve, reject) => {
if (denominator === 0) {
reject("Cannot divide by 0");
return; // The function execution ends here
}
resolve(numerator / denominator);
});
}
この場合
resolve(numerator / denominator);
を実行することは、厳密には必要ではありません。しかし、将来起こりうる罠を防ぐためには、やはり実行を終了させることが望ましいでしょう。さらに、コードを不必要に実行しないようにすることも良い習慣です。
背景
プロミスは3つの状態のうちの1つになることができます。
- pending - 初期状態。保留状態から他の状態に移行することができる
- fulfilled - 操作に成功しました。
- rejected - 操作に失敗しました。
約束が実行されたり拒否されたりすると、その状態は無期限で維持されます(解決済み)。そのため、成立した約束を拒否しても、拒否された約束を成立させても、何の効果もありません。
この例のスニペットでは、拒否された後、約束は履行されましたが、拒否されたままになっています。
function divide(numerator, denominator) {
return new Promise((resolve, reject) => {
if (denominator === 0) {
reject("Cannot divide by 0");
}
resolve(numerator / denominator);
});
}
divide(5,0)
.then((result) => console.log('result: ', result))
.catch((error) => console.log('error: ', error));
では、なぜ戻る必要があるのでしょうか?
解決したプロミスの状態を変更することはできませんが、拒否したり解決したりしても、関数の残りの部分の実行が停止することはありません。この関数には、混乱を招くような結果を生むコードが含まれている可能性があります。たとえば、以下のようなものです。
function divide(numerator, denominator) {
return new Promise((resolve, reject) => {
if (denominator === 0) {
reject("Cannot divide by 0");
}
console.log('operation succeeded');
resolve(numerator / denominator);
});
}
divide(5, 0)
.then((result) => console.log('result: ', result))
.catch((error) => console.log('error: ', error));
たとえ今この関数がそのようなコードを含んでいなくても、これは将来起こりうる罠を作り出しています。将来のリファクタリングでは、プロミスが拒否された後もコードが実行されるという事実を無視する可能性があり、デバッグが困難になります。
resolve/reject の後に実行を停止する。
これはJSの標準的な制御フローのものです。
-
の後に戻ります。
resolve
/reject
:
function divide(numerator, denominator) {
return new Promise((resolve, reject) => {
if (denominator === 0) {
reject("Cannot divide by 0");
return;
}
console.log('operation succeeded');
resolve(numerator / denominator);
});
}
divide(5, 0)
.then((result) => console.log('result: ', result))
.catch((error) => console.log('error: ', error));
-
で返す。
resolve
/reject
- コールバックの戻り値は無視されるので、reject/resolve文を返すことで1行を節約できる。
function divide(numerator, denominator) {
return new Promise((resolve, reject) => {
if (denominator === 0) {
return reject("Cannot divide by 0");
}
console.log('operation succeeded');
resolve(numerator / denominator);
});
}
divide(5, 0)
.then((result) => console.log('result: ', result))
.catch((error) => console.log('error: ', error));
- if/elseブロックを使用する。
function divide(numerator, denominator) {
return new Promise((resolve, reject) => {
if (denominator === 0) {
reject("Cannot divide by 0");
} else {
console.log('operation succeeded');
resolve(numerator / denominator);
}
});
}
divide(5, 0)
.then((result) => console.log('result: ', result))
.catch((error) => console.log('error: ', error));
のいずれかを使用するのが望ましいと思います。
return
というオプションは、コードが平坦になるためです。
関連
-
JSアレイループと効率解析の比較
-
vueの補間表現とv-textディレクティブの違いについて
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] なぜ ++[[]][+[] +[+[]] は "10" という文字列を返すのでしょうか?
-
[解決済み] JavascriptのPromiseを関数スコープ外で解決する
-
[解決済み】JavaScriptのプロミス - reject vs. throw
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
vueのグローバルがscss(mixin)を導入。
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
vue ディレクティブ v-html と v-text
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法