非同期処理をちゃんと理解するぞ！
ということで,今日はコールバックやっていきます。
コールバックって？
コールバック関数とは,｢引数として渡される関数｣のこと。
非同期処理で,例外処理を行ったり,処理に順番を付けたりするのをコールバックを使用して実現することができます。
コールバックを実装してみる
単純なコールバック
// 実行される関数
const execFunc = (callback) => {
console.log('execute!!');
callback();
};
// 引数として渡される関数 = コールバック関数
const callbackFunc = () => {
console.log('I am CollBack!!');
};
// 実行
execFunc(callbackFunc);
// 実行結果
// → execute!!
// → I am CollBack!!まだギリ理解できます。
execFunc関数の引数にコールバック関数としてcallbackFunc関数を渡して,execFunc関数の処理の中でcallbackFuncが処理されます。
コールバック地獄への道
非同期処理が複数ある場合は,それぞれ処理にかかる時間が異なるため,順序が保証されません。
// 処理に5秒かかる非同期処理
const first = () => {
setTimeout(() => {
console.log('first');
}, 5000);
};
// 処理に4秒かかる非同期処理
const second = () => {
setTimeout(() => {
console.log('second');
}, 4000);
}
// 処理に3秒かかる非同期処理
const third = () => {
setTimeout(() => {
console.log('third');
}, 3000);
}
// 非同期処理のため順番が保証されない
first();
second();
third();
// 実行結果
// → third
// → second
// → firstこれをコールバックを使って,実行したい順に実行されるようにしてみます。
const first = (callback) => {
setTimeout(() => {
console.log('first');
callback();
}, 5000);
};
const second = (callback) => {
setTimeout(() => {
console.log('second');
callback();
}, 4000);
}
const third = () => {
setTimeout(() => {
console.log('third');
}, 3000);
}
// 非同期処理を同期的に処理する
first(() => {
second(() => {
third();
});
});
// 実行結果
// → first
// → second
// → third処理が増えて行くと,その分ネストも深くなっていき可読性が非常に悪くなります。
これがいわゆるコールバック地獄というやつですね。
まとめ
非同期処理の基礎であるコールバック。
まだ,しっくりこない感はありますが,以前よりは理解が深まったと思います。
ふとした瞬間に腹落ちすることを願って。
引き続き非同期処理やっていきたいとおもいます。
それではまた明日。