[解決済み] 明示的なプロミス構築のアンチパターンとそれを回避する方法とは?
2022-03-17 10:36:20
質問
というようなことをするコードを書いていました。
function getStuffDone(param) { | function getStuffDone(param) {
var d = Q.defer(); /* or $q.defer */ | return new Promise(function(resolve, reject) {
// or = new $.Deferred() etc. | // using a promise constructor
myPromiseFn(param+1) | myPromiseFn(param+1)
.then(function(val) { /* or .done */ | .then(function(val) {
d.resolve(val); | resolve(val);
}).catch(function(err) { /* .fail */ | }).catch(function(err) {
d.reject(err); | reject(err);
}); | });
return d.promise; /* or promise() */ | });
} | }
ある人が、これを「"」と呼ぶと教えてくれました。
遅延のアンチパターン
または「"
Promise
コンストラクタのアンチパターン
それぞれ、このコードのどこが悪いのか、なぜこれが
アンチパターン
?
解決方法は?
その 遅延のアンチパターン (現在は明示的な構築のアンチパターン) による造語です。 エスセーリア は、プロミスを使い始めたばかりの人がよくやるアンチパターンです。上記のコードの問題点は、プロミスが連鎖するという事実を利用できていないことです。
プロミスは以下のように連鎖することができます。
.then
で、プロミスを直接返すことができます。の中のあなたのコードは
getStuffDone
は次のように書き換えることができる。
function getStuffDone(param){
return myPromiseFn(param+1); // much nicer, right?
}
プロミスは、非同期コードをより読みやすくし、その事実を隠すことなく同期コードのように振る舞うことができるようにするためのものです。プロミスは1回の操作の値を抽象化したもので、プログラミング言語における文や式の概念を抽象化したものです。
ディファードオブジェクトを使用するのは、次のような場合だけにしてください。 APIをプロミスに変換する 自動でできない場合や、この方法で表現した方が簡単な集約関数を書いている場合などです。
引用元: Esailijaさん
<ブロッククオートこれは最も一般的なアンチパターンです。プロミスをよく理解せず、イベントエミッターやコールバックユーティリティのように考えていると陥りがちです。プロミスは非同期コードにフラットインデントや1つの例外チャネルといった同期コードで失われた特性のほとんどを保持させるものです.
関連
-
fetch ネットワークリクエストラッパーの説明例
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み】JavaScript版sleep()とは?)
-
[解決済み】PromiseとObservablesの違いは何ですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
Vueにシンプルなメモ帳機能を実装
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules