コールバック関数をリファクタリングするためのビジュアルガイド
どこにでも深くネストした呼び出しをしている間、あなたは常に途中であなたのコードを理解するのに苦労していますか?
100万の深いコールバック木は、悲惨です.
おそらく、あなたはまだAsync/快適さと快適ではないと約束を使用して立ち往生している.
しかし、あなたがどのようにasync/waitが働くかについて理解するならば、あなたは何を成し遂げますか?成功した就職の面接、あなたのスキル、またはプロモーションのための認識?
どのようにあなたの仕事についてどのように変更するかを理解し、変更しやすいコードで作業を想像してみませんか?
非同期コードフローに関与する個々の部分を識別して分離する簡単なアプローチを学ぶことによって、リファクタリング処理にバグを導入することは避けられます.
あなたは、あなたに非同期喜びにコールバック地獄を回す自信を与える新しいスキルを学びます.
ノードの入門書.コールバックコンベンション
Callbacks can be either synchronous or asynchronous .ノードの非同期コールバックについて話すとき.JSは、ほとんどの場合、以下の2点が該当します.
// The callback function is the last argument to an asynchronous function
asyncFunction(...params, callback);
nullとなり、0、1つ以上の戻り値が返されます.// An error-first callback function
callback(error, ...results) {
if (error) {
// Handle error
return;
}
// Do something with the result...
}
非同期コードフローの一部
非同期コードをいくつかの異なる部分に分割することができます.リファクタリング前にこれらの個々の部品を識別して分離することは、プロセス内のコードを壊さない鍵です.
5つの部分があります.
この記事を通して、ノードのファイルの内容を読みます.例としてのJS.コールバックアプローチを開始し、refactorを再起動し、最後にasync/waitを使用します.
ここではあなたのための演習です-を読む前に、次のコードスニペットのすべての5つの部分を識別し、分離しようとします.
ファイルをノードで読み込むコールバック関数を使用したjs
さあ行きましょう.
.
.
.
.
.
.
.
.
.
.
あなたは、非同期コード・フローに関係するすべての部品を正しく特定しましたか?以下のイメージで答えを比較してください.
非同期コードフローの個別部分
Note: The
returnkeyword is an Return Early Pattern to avoid wrapping and indenting the remaining code in anelseblock. Returning nothing is the same as not using the keyword at all — in both cases the function's return value isundefined. In the promise & async/await examples further in this article the return keyword is left out, and because that doesn't change the function definition it's safe to exclude it from the error handling part.
コールバック関数のリファクタリング
個々の部品を識別し、分離したら、その約束を使用するコールバック関数を再設定する準備が整いました.
リファクタリング中に、個々の部分に内部的に何かを変更しないことを覚えておくことが重要です.
コールバック関数を約束にリファクタリングするには、部品を全体として移動し、別の方法で一緒に置くことによって行われます.
次の動画はこのプロセスを視覚的に説明します.
Note: The second
fs.readFileis the promisified version of its callback counterpart from thefs/promisesNode.js API namespace. Most libraries provide promise alternatives to callback functions. In case yours doesn't, or if you're depending on custom legacy code, you can promisify any asynchronous function that's using the error-first callback convention withutil.promisify.
エラーを処理し、戻り値を使用する部分は、例えば1つの短いライナーです.あなたの状況では、彼らはおそらくはるかに大きいでしょうが、原則は同じままです-部品を変更することなく、全体のユニットとして移動するか、それらを分割する必要があります.
コールバック関数と約束の間の顕著な違いは、エラー処理(失敗)が戻り値(成功)を使用して分離されることです.この視覚的分離は、2つの発散するコードパスのより良い表現であり、したがって、より容易に動作する.
リファクタリングはasync／waitに約束する
Async/Waitの直近のリファクトコールバック関数は、複数のステップを含みます.
リファクタリング処理への中間段階を追加するのは簡単でエラーが少ないかもしれません.まず、コールバック関数を約束に戻し直します.
これは、約束から非同期/待機への遷移が視覚的に見える方法です
コールバック関数から約束に移行した前のアニメーションと比較して、どれだけ動きが少ないかに注意してください.成功と失敗の部分が別々に保たれるので、async/waitに約束をリファクタリングすることは主に構文を変えることです.
結論
あなたが約束とAsync/Wait itに楽なファクターコールバック機能をすることができる前に、それは多くの練習をします.
最初に非同期コードフローに含まれる個々の部分を識別して分離することによって、リファクタリング中にアプリケーションを中断することは少なくなります.
今それはあなたのターンナイトメア誘導のレガシーコードを取り除くために取得し、待望の(パンを意図しない)クリーンアップを行う.CodeBaseを読みやすく、維持し、最も重要なのは、喜びを働くことです.✨
非同期コードを読みやすくするために深くネストしたコールバックツリーを変える
どのように読むことが容易で、無料の5日間の電子メールコースで変更するコードにunmaintainableコードを有効にする方法を学びます.
入れ子になったコールバックを非同期/waitに変換する方法を視覚的に説明したリファクタリングのコールバックガイドを取得します.シンプルで効果的な5段階のアプローチを使用して、新たなバグを導入せずに深くネストされたコールバックの地獄をリファクタリングに自信を得ることができます.
また、30 +現実世界の演習では、大幅にあなたのキャリアのためになる実用的なスキルに知識を転送します.
👉🏼 Get Lesson 1 now
Reference
この問題について(コールバック関数をリファクタリングするためのビジュアルガイド), 我々は、より多くの情報をここで見つけました https://dev.to/maximization/a-visual-guide-to-refactoring-callback-functions-to-promises-async-await-3kj7テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol