学ぶ Promiseによる非同期処理の扱い | 非同期JavaScriptとAPI統合

メニューを表示するにはスワイプしてください

Promiseとは何か？

Promiseは将来の値のためのプレースホルダーであり、次のいずれかになります。

Promiseは最初はpendingの状態で開始し、その後、値とともにfulfilled、または理由とともにrejectedのいずれかに永久的に確定します。

resolve、reject、および then() メソッドの理解

Promise の作成

Promise を作成するには、2 つのパラメータ（resolve と reject）を持つ関数を渡します。これらのパラメータは、非同期処理が正常に完了したか、失敗したかを示すために使用される関数です。

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});

resolve(value): Promise を成功（fulfilled）としてマークし、結果（value）を渡す；
reject(error): Promise を失敗（rejected）としてマークし、エラーを渡す。

then() を使った解決済み Promise の処理

Promise が作成された後、then() メソッドを使って結果を処理できます。このメソッドは、Promise が成功（resolved）したときに呼び出されます。

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

この例では、then() メソッドが resolve() に渡された値を受け取り、その結果でコールバックを実行します。Promise が正常に解決された場合のみ実行されます。

.catch() によるエラー処理

Promise は .catch() メソッドを使ってエラーを簡単に処理できます。Promise が拒否（失敗）された場合、エラーは .catch() 内で捕捉されて処理されます。


              1234567891011121314151617
            
const myPromise = new Promise((resolve, reject) => {
  const success = false; // Simulate a failure

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});

myPromise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error('Error:', error); // Output: Error: Task failed.
  });

catch() メソッドは、Promise が拒否されたときにエラーを処理するために使用。reject() によって渡されたエラーを捕捉し、失敗時のシナリオを管理可能。

順次非同期処理のための Promise のチェーン

Promise の主な利点の一つは、それらを連結して複数の非同期処理を順番に扱える点。これにより、コールバック地獄を回避しながら処理を進行可能。各 then() は新しい Promise を返し、複数の then() を連続して呼び出すことができ、各 Promise が解決されるたびに HTML に結果が表示される。