こんにちは、さるまりんです。
前回は、JavaScriptの非同期処理でよく登場する Promise について見てきました。
Promiseは、
あとで結果が返ってくることを表すオブジェクト
でした。
例えば、こんなPromiseがあったとします。
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve("できました！");
}, 1000);
});1秒後に、
resolve("できました！");が実行されます。
では、この "できました！" という結果は、どうやって受け取ればいいのでしょうか。
今回は、そのときに使う .then() について見ていきたいと思います。
thenを使ってみよう
先ほどのPromiseの結果を受け取ってみます。
promise.then((result) => {
console.log(result);
});実行すると、1秒ほどあとに、
できました！と表示されます。
.then() には、Promiseの処理が成功したあとに行いたい処理を書くことができます。
今回の場合は、
console.log(result);ですね。
Promiseから結果が返ってきたら、その結果を画面に表示しています。
resultはどこから来たの？
ここで、
(result) => {
console.log(result);
}の result はどこから来たのでしょうか。
Promiseの中をもう一度見てみます。
resolve("できました！");ここで resolve() に渡した、
できました！という値が、.then() に書いた処理へ渡されます。
つまり、
resolve("できました！");で渡した値を、
promise.then((result) => {
console.log(result);
});の result で受け取っているんです。
result という名前に決まりがあるわけではありません。
例えば、
promise.then((message) => {
console.log(message);
});としても同じように動きます。
ひとつにつなげて書くこともできます
ここまでは、
const promise = new Promise(...);として、Promiseをいったん変数に入れていました。
ひとつにつなげて、こんなふうに書くこともできます。
new Promise((resolve) => {
setTimeout(() => {
resolve("できました！");
}, 1000);
}).then((result) => {
console.log(result);
});少し長く見えますが、やっていることは同じです。
Promiseの処理が成功して値が返ってきたら、.then() に書いた処理が実行されます。
最初のうちは、Promiseの部分と .then() の部分を分けて考えてみると、分かりやすいかもしれません。
thenは「そのあと」
英語の then には、
「それから」「そのあと」
といった意味があります。
Promiseで何かをして、
そのあと、どうする？
と考えてみると、イメージしやすいかもしれませんね。
promise.then((result) => {
console.log(result);
});Promiseの処理が成功したら、
そのあと、この処理をする。
って感じです。
まとめ
今回は、Promiseの .then() について見てきました。
Promiseでは、あとで結果を受け取ることができます。
そして、
resolve("できました！");のように resolve() に渡した値は、
promise.then((result) => {
console.log(result);
});のように .then() の中で受け取ることができます。
Promiseが、
「あとで結果が返ってくることを表すもの」
なら、.then() は、
「そのあとに何をするかを書くところ」
と考えてみると、少し分かりやすいかもしれません。
では、Promiseの処理がうまくいかなかったときはどうなるのでしょう。
次回は、そんなときに登場する catch() について見ていきたいと思います。
読んでくださってありがとうございました。
それではまた！