こんにちは、よしかわです。
もりけん塾のJS課題5〜10に取り組み、非同期処理を学びました。
わからなかったことや、躓いたポイントについて、自分なりの考えを綴っていきます。
Promiseの引数について
resolve,rejectってなに？
「今日も元気にJS課題！」と意気込んでJS課題8に取り組んでいた時のお話です。
Promiseの処理内でエラーをキャッチして、コンソールに出力するというもの。
const getListData = new Promise((reject) => {
startLoading();
const listData = [{
img: "1.png",
alt: "画像1",
text: "ブックマーク"
}, {
img: "2.png",
alt: "画像2",
text: "メッセージ"
}];
setTimeout(() => {
reject(Error('エラーです'));
}, 3000);
});
getListData.catch((error) => {
return error;
});
getListData.then((catched) => {
console.error(catched);
});どこを間違えているかお分かりでしょうか？
簡単にPromiseの引数についておさらいです。Promiseでは、引数に関数を2つ取れます。resolveとrejectです。（ここ重要…）
まず、エラーを起こすためにPromiseの引数にrejectを設定し、3秒後にそれを実行させようとしました。
const getListData = new Promise((reject) => {
startLoading();
const listData = [{
img: "1.png",
alt: "画像1",
text: "ブックマーク"
}, {
img: "2.png",
alt: "画像2",
text: "メッセージ"
}];
setTimeout(() => {
reject(Error('エラーです'));
}, 3000);
});rejectで処理された値を受け取り、errorとして返す。
getListData.catch((error) => {
return error;
});そして、返り値をコンソールにエラーとして出力する。
getListData.then((catched) => {
console.error(catched);
});コンソールには問題なく出力されている。。
本当に合っているのか不安だったので、試しにcatchブロックをコメントアウトしてリロードしてみました。
あれれ。
全く問題なくエラー出てきた。。
ここは問題あって欲しかったのに。。。
ここで私はとんでもないことに気づきました。
「引数1つじゃresolveじゃん。」
rejectという名前の関数がPromiseの中では、resolveとして認識されていたため、thenメソッドのみでも問題なく動いてしまったのです。
rejectとして認識されるにはPromiseの第2引数である必要があるんですね。rejectと書けば認識してくれるものだと思い込んでいました。
resolveを追加して
const getListData = new Promise((resolve, reject) => {catchブロックでコンソールに出力
getListData.catch((error) => {
console.error(error);
});一件落着。
まとめ
振り返ると、「何してんだ。。」と思いますが、こうした失敗が成長の糧になると信じて明日からも頑張ります。
それにしても、ひどい勘違いでした。参った参った。
あとがき
「もりけん塾」とは、もりけん先生が用意してくださった課題を通して、JavaScriptを学習するコミュニティです。
もりけん先生のTwitter: @terrace_tech
もりけん先生のブログ: 武骨日記
コメント