連続処理
基本的に、コードは書いた順番で実行されます。
console.log('start');
console.log('execute');
console.log('end');
このコードは期待通り、「start -> execute -> end」の順番で実行されます。
この時、コードを関数化して別の場所に置きたい場合もあるでしょう。
その場合も関数を順番通りに呼び指せば、期待通りに機能します。
start();
execute();
end();
ところが、ここで非同期処理を挟むと期待通りの順番で実行されません。
console.log('start');
fetch('./').then(response => console.log('execute'));
console.log('end');
このコードは、「start -> end -> execute」の順番で出力されます。
非同期処理の順番を制御する方法はいくつかあります。
コールバック関数
一つは、コールバック関数を定義してやることです。
非同期処理を実行する関数の最後でコールバック関数を呼び出す事で外部から終了処理を与えることが出来ます。
function start () {
console.log('start');
}
function execute (end) {
fetch('./').then(response => {console.log('execute');end();});
}
function end () {
console.log('end');
}
start();
execute(end);
Promise
コールバック関数を発展させたものが Promise
です。
Promise は統一されたインターフェースでコールバック関数を制御することが出来ます。
Fetch APIは Promise を返すので、そのまま利用することが出来ます。
function start () {
console.log('start');
}
function execute (end) {
fetch('./').then(response => (console.log('execute'),this)).then(end);
}
function end () {
console.log('end');
}
start();
execute(end);
DOM Events
DOM Events も非同期処理の一つです。
独自のイベントを定義してやる事で終了処理を呼び出すことが出来ます。
function start () {
console.log('start');
}
document.addEventListener('custom-end', function (event) { console.log(event.type); }, false)
function execute () {
fetch('./').then(response => (console.log('execute'), document.dispatchEvent(new Event('custom-end'))));
}
start();
execute();
ただし、DOM Events はDOMと密接にかかわる非同期処理で効果を発揮します。
必要もないのに、DOMノードでイベントを発火させるのはグローバル変数を作るのと同じなので避けた方が良いでしょう。
Re: @re9