JavaScriptのthen()関数解説 - 代替メソッド
2024-09-11
JavaScriptのthen()関数の意味を日本語で解説
then()関数は、JavaScriptにおけるPromiseオブジェクトのメソッドです。Promiseは、非同期操作の結果を扱うためのオブジェクトであり、then()メソッドは、その結果が解決（fulfilled）されたときに実行される関数を指定するために使用されます。
具体的な説明
- Promiseオブジェクトの生成:
then()メソッドの呼び出し:- 結果の処理:
コード例
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, world!');
}, 1000);
});
promise.then((result) => {
console.log(result); // 出力: Hello, world!
});
このコードでは、1秒後に解決するPromiseオブジェクトを作成し、その結果をthen()メソッドで処理しています。
重要なポイント
then()メソッドは、Promiseが解決された場合にのみ実行されます。- 複数の
then()メソッドをチェーンすることができます。 then()メソッドは、Promiseが拒否（rejected）された場合に実行されるcatch()メソッドも持っています。
JavaScriptのthen()関数解説 - コード例
Promiseオブジェクトの生成とthen()メソッドの使用
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, world!');
}, 1000);
});
promise.then((result) => {
console.log(result); // 出力: Hello, world!
});
解説:
- Promiseオブジェクトの生成:
new Promise()で新しいPromiseオブジェクトを作成します。- 引数として渡されたコールバック関数には、
resolveとrejectの2つの関数を受け取ります。
- 非同期処理:
setTimeout()を使用して、1秒後にresolve関数を呼び出します。resolve関数を呼び出すことで、Promiseが解決され、then()メソッドで指定した関数が実行されます。
then()メソッドによる結果処理:- Promiseが解決されると、この関数が実行され、
resultには解決された値が渡されます。 console.log(result)で結果を出力します。
- Promiseが解決されると、この関数が実行され、
then()メソッドのチェーン
const promise = new Promise((resolve) => {
resolve('Hello');
});
promise
.then((greeting) => {
return greeting + '!';
})
.then((message) => {
console.log(message); // 出力: Hello!
});
then()メソッドをチェーンすることで、複数の処理を順次実行できます。- 前の
then()メソッドの返り値が次のthen()メソッドの引数として渡されます。
複数のthen()メソッドとcatch()メソッド
const promise = new Promise((resolve, reject) => {
if (Math.random() < 0.5) {
resolve('Success');
} else {
reject('Error');
}
});
promise
.then((result) => {
console.log('Success:', result);
})
.catch((error) => {
console.error('Error:', error);
});
reject関数を呼び出すことで、Promiseが拒否されます。catch()メソッドは、Promiseが拒否された場合に実行される関数を指定します。- 複数の
then()メソッドとcatch()メソッドを組み合わせることができます。
async/await構文
async/await構文は、Promiseベースの非同期処理をより同期的なスタイルで記述するための方法です。
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchDat a();
asyncキーワードを関数の前に付けることで、非同期関数を定義します。awaitキーワードをPromiseオブジェクトの前に付けることで、Promiseが解決されるまでコードの実行を一時停止します。- これで、非同期処理を同期的なコードのように記述することができます。
Promise.all()
const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
Promise.all([promise1, promise2])
.then((response s) => {
Promise.all(responses.map((response) => response.json()))
.then((dat a) => {
console.log(data);
});
})
.catch((error) => {
console.error(error);
});
Promise.all()にPromiseの配列を渡すと、すべてのPromiseが解決されるまで待機します。- すべてのPromiseが解決されると、
then()メソッドで指定した関数が実行され、解決された値の配列が渡されます。
複数のPromiseを並列に実行し、最初に解決されたPromiseの結果を取得する場合は、Promise.race()を使用します。
const promise1 = new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 1');
}, 1000);
});
const promise2 = new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 2');
}, 50 0);
});
Promise.race([promise1, promise2])
.then((result) => {
console.log(result); // 出力: Promise 2
});
Promise.race()にPromiseの配列を渡すと、最初に解決されたPromiseの結果を返します。
javascript
