この記事では、JavaScriptのPromiseとawaitを使って処理を一時停止する方法について説明します。非同期処理を一時停止して、指定した時間が経過した後に再開する方法を見ていきます。
目次
Promiseの基本
Promiseは、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseは「pending」、「fulfilled」、または「rejected」のいずれかの状態を持ちます。Promiseが作成されると、「pending」の状態になり、その後処理が完了した場合には「fulfilled」に、エラーが発生した場合には「rejected」になります。
Promiseの解決や拒否は、resolve関数とreject関数を使って行われます。resolve関数は、Promiseが正常に完了したことを示すために使用され、reject関数は、エラーが発生したことを示すために使用されます。
処理を一時停止する方法
以下のコードは、Promiseを生成し、2秒後にそれを解決するように設定されています。awaitキーワードを使用して、Promiseが解決されるまで非同期処理を一時停止しています。Promiseが解決されると、処理が再開されます。
await new Promise((resolve) => {
console.log('Waiting for 2 seconds...');
setTimeout(() => {
console.log('2 seconds passed. Resolving the promise now.');
resolve();
}, 2000);
});このコードは、処理を2秒間一時停止する目的で使用されます。そのため、.then()やawaitを使ってPromiseに対してさらに処理を追加する必要はありません。
ただし、このコードはasync関数の中にあると仮定しています。awaitキーワードは、async関数の中でのみ使用できます。したがって、このコードはasync関数内になければ機能しません。
then()を使った例
awaitを使ってPromiseが解決されるのを待っている例ではありますが、then()を使って同様のことを実現することもできます。以下にその例を示します。
new Promise((resolve) => {
console.log('Waiting for 2 seconds...');
setTimeout(() => {
console.log('2 seconds passed. Resolving the promise now.');
resolve();
}, 2000);
}).then(() => {
console.log('Promise has been resolved.');
});このコードは、Promiseが解決されると.then()の中のコールバック関数が実行されるように設定しています。この例では、Promiseが解決された後に「
Promise has been resolved.」というメッセージがコンソールに表示されます。ただし、この方法では処理が一時停止しないため、後続の処理が待機せずに実行されることになります。
まとめ
JavaScriptのPromiseとawaitを使って非同期処理を一時停止し、指定した時間が経過した後に再開する方法を学びました。これらの機能は、非同期処理を効果的に制御するために役立ちます。PromiseはJavaScriptで非同期処理を扱うための強力なツールであり、awaitと組み合わせることでコードの可読性と理解しやすさを向上させることができます。