3.1 Promise チェーンの作成
Promise チェーンは、複数の非同期操作を順番に実行し、1つの操作の結果を次の操作に渡すことができるんだ。これにより、コードが読みやすく管理しやすくなるよ。さらに、Promiseはエラー処理の強力な機能を提供するので、信頼性が高くて故障に強いアプリケーションを作れるんだ。
基本的な概念
Promise チェーンは、then メソッドから新しい Promise を返すことによって作成されるよ。各 then メソッドは新しい Promise を返し、順次非同期操作を構築することができるんだ。
簡単な Promise チェーンの例
この例では、各 then メソッドがその操作を実行し、結果を次の then メソッドに渡すんだ。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Step 1 completed');
}, 1000);
});
promise
.then((result) => {
console.log(result); // 出力される: Step 1 completed
return 'Step 2 completed';
})
.then((result) => {
console.log(result); // 出力される: Step 2 completed
return 'Step 3 completed';
})
.then((result) => {
console.log(result); // 出力される: Step 3 completed
})
.catch((error) => {
console.error(error);
});
非同期操作を含むチェーンの例
この例では、各 then メソッドが次のステップを実行する前に、非同期操作の完了を待つんだ：
function asyncOperation(step) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${step} completed`);
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result); // 出力される: Step 1 completed
return asyncOperation('Step 2');
})
.then((result) => {
console.log(result); // 出力される: Step 2 completed
return asyncOperation('Step 3');
})
.then((result) => {
console.log(result); // 出力される: Step 3 completed
})
.catch((error) => {
console.error(error);
});
3.2 Promise チェーンでのエラー処理
catch メソッドは Promise チェーンのエラーを処理するために使用されるよ。もしどのプロミスにでもエラーが発生した場合、そのエラーは最も近い catch メソッドに渡されるんだ。これにより、エラーを集中管理することができ、コードの読みやすさと保守性を向上させるんだ。
エラー処理の例
この例では、Step 2で発生したエラーが catch メソッドによって捕捉され、以降の then メソッドは実行されないんだ：
function asyncOperation(step, shouldFail = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(`${step} failed`);
} else {
resolve(`${step} completed`);
}
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result);
return asyncOperation('Step 2', true); // この操作はエラーで終了する
})
.then((result) => {
console.log(result); // このコードは実行されない
return asyncOperation('Step 3');
})
.then((result) => {
console.log(result); // このコードは実行されない
})
.catch((error) => {
console.error('Error:', error); // 出力される: Error: Step 2 failed
});
特定のステップでのエラー処理
時には、チェーン全体の実行を中断せずに、特定のステップでエラーを処理する必要があることもある。これを行うには、ネストされた then と catch メソッドを使用できるんだ。
特定のステップでのエラー処理の例
この例では、Step 2 のエラーがローカルに処理され、チェーンは復旧した値で実行を続行するんだ：
function asyncOperation(step, shouldFail = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(`${step} failed`);
} else {
resolve(`${step} completed`);
}
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result);
return asyncOperation('Step 2', true).catch((error) => {
console.warn('Handled error in Step 2:', error);
return 'Recovered from Step 2 error';
});
})
.then((result) => {
console.log(result); // 出力される: Recovered from Step 2 error
return asyncOperation('Step 3');
})
.then((result) => {
console.log(result); // 出力される: Step 3 completed
})
.catch((error) => {
console.error('Error:', error); // このコードは実行されない
});
3.3 finally の使用
finally メソッドは、Promise が成功しようが失敗しようが、コードを必ず実行するために使用されるよ。リソースのクリーンアップなどの終了処理を行うのに便利なんだ。
finally の使用例:
function asyncOperation(step, shouldFail = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(`${step} failed`);
} else {
resolve(`${step} completed`);
}
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result);
return asyncOperation('Step 2');
})
.then((result) => {
console.log(result);
return asyncOperation('Step 3');
})
.catch((error) => {
console.error('Error:', error);
})
.finally(() => {
console.log('All operations completed'); // いずれの場合でも実行される
});
この例では、エラーの有無に関わらず、finally メソッドが実行される。
GO TO FULL VERSION