コールバック、Promise、Async/Await: 詳細な比較

紹介:
非同期プログラミングは最新の JavaScript 開発の基礎であり、メイン スレッドをブロックすることなくタスクを同時に実行できるようになります。時間の経過とともに、JavaScript は非同期操作を処理するためのより洗練されたソリューションを備えて進化してきました。この記事では、従来のコールバックから始まり、Promise と async/await 構文に至るまで、非同期 JavaScript の進化を探っていきます。

1. コールバック関数: 従来、JavaScript はコールバック関数を使用して非同期操作を処理していました。コールバックを使用すると、非同期タスクの完了後に実行される関数を定義できます。しかし、コードベースが大きくなり複雑になるにつれて、コールバックベースのアプローチは、コールバック地獄やコードの可読性の低下などの問題を引き起こしました。

例:

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

出力:
コードを実行すると、出力は次のようになります:

kishan
Anuj
jatin

ステップ 2

Promise は、よりクリーンで管理しやすく、エラーに強い非同期コードの操作方法を提供するため、非同期操作を処理する場合はコールバックよりも優れています。 Promise が優れていると考えられる理由は次のとおりです:

1. コールバック地獄を回避する コールバック: 複数のコールバックをネストすると、深くネストされた読みにくいコードが生成されます (一般に「コールバック地獄」として知られています)。 Promise: コードをフラットで読みやすい状態に保ち、.then() 呼び出しを連鎖させることを約束します

1. エラー処理
   コールバック: エラーはすべてのレベルで明示的に処理する必要があるため、間違いが発生しやすくなります。
   お約束: .catch() を使用すると、エラーを 1 か所で処理できます

2. 読みやすさの向上
   Promise には .then() と .catch() を使用した明確な構造があり、コードの理解、デバッグ、保守が容易になります。

3. 複数の非同期呼び出しのチェーン
   Promise により、連続した非同期操作の連鎖がシームレスになります

例

const datas = [
  { name: "kishan", profession: "software Engineer" },
  { name: "Anuj", profession: "software Engineer" },
];

function getDatas() {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.forEach((data) => {
        console.log(data.name);
      });
      resolve(); // Signal completion
    }, 1000);
  });
}

function createdData(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.push(newData);
      resolve(); // Signal completion
    }, 2000);
  });
}

function logCompletion() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("All tasks completed!");
      resolve();
    }, 500);
  });
}

// Usage with an Additional Task
createdData({ name: "jatin", profession: "software Engineer" })
  .then(getDatas)
  .then(logCompletion) // New Task
  .catch((err) => console.error(err));

仕組み:
作成されたデータ:
2 秒後に新しいデータ エントリをデータ配列に追加します。
getDatas:
1 秒後にすべての名前をデータ配列に記録します。
logCompletion (新しいタスク):
「すべてのタスクが完了しました!」というログが記録されます。 500 ミリ秒後。

出力:
更新されたコードを実行すると、出力は次のようになります:

kishan
Anuj
jatin
All tasks completed!

約束するとこれが簡単になる理由:
各タスクは Promise を返すため、チェーン内のステップを簡単に追加、再配置、削除できます。
すっきりとした構造により、順序が維持され、理解しやすくなります。

ステップ 3

async/await を使用すると、Promises の構文が簡素化され、非同期でありながらコードが読みやすくなり、同期フローに近づきます。 async/await で書き換えるとコードがどのように見えるかは次のとおりです。

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

async/await の利点:
可読性:
コードは同期的なステップバイステップのロジックのように読み取れます。
チェーンやネストはありません。
エラー処理:
一元化された一貫したエラー処理メカニズムには、try...catch ブロックを使用します。
スケーラビリティ:
新しいタスクの追加は、別の await 行を追加するのと同じくらい簡単です。

出力:
コードを実行すると、次の結果が得られます:

kishan
Anuj
jatin

以上がコールバック、Promise、Async/Await: 詳細な比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。