Promiseでスッキリ

Promiseの文献が睡眠導入剤(文献が悪いのじゃなくて、落書き人の理解力不足)だったので、百聞は一見になんとか、とにかく動かして目で確認して理解したつもりになる。そんな落書き人の実践メモです。
単発のPromiseの事例はたくさんありますが、複数の非同期処理の組み立て方（直列，並行，早い者がち勝ち,それらの組み合わせ）がわからないと、実用的な非同期処理がかけません。
そこで、いきなりですが非同期処理を目視で確認してみました。これらのソースをリバースエンジニアリングすると何をしているかが解る？

1.5秒の非同期処理を２つ直列実行させる場合

3秒と1.5秒の非同期処理を並列実行させる場合

3秒と1.5秒の非同期処理をレースさせる場合

非同期処理に1秒の非同期処理を入れ子にした場合

Prommiseの分岐ケースの場合

リエントラントなPrommise処理を同時実行【まだ実装前】

一連のPromise処理を重複実行させない仕掛けはキューイングで

Startボタン連打で複数Promise実行させると、訳が分からなくなります。そこでStrat連打で、実行中のPromise処理があったら処理Canselさせてから、リクエストのStartを実行させるように、キューイングの仕掛けが必要でした。

一連のPromise処理を重複実行させたい場合はclass(prototype)にする

リエントラントな非同期処理にする必要があります。
この事例では踏み込んでいませんが、これが必要になった時に加筆します。

AbortControllerは１回限り【重要】

abort()メソッドでsignalのイベントが発火するのは１回限りです。
その理由は一度発火すると、signalのEventListenerが削除されるからです。
一連のPromise処理を重複実行させたいケース(マルチトランザクション的な)では、リエントラントな処理(class定義(prototype))にして、AbortControllerの実装を、それぞれのインスタンスオブジェクトの中で、別々にするという考慮が必要です。つまりclassの中にAbortControllerを定義しておく必要があります。

リバースエンジニアリングは

詳しくはこの上述で確認ボタンの処理を記述したJavaScript「js/promise_cancel.js」「js/promise_cancel_race.js」「js/promise_cancel_all.js」「js/promise_cancel_branch.js」をリバースエンジニアリングしてください。UTF-8(UNICODE)でデコードしないと文字化け化けです。

AbortControllerはDOMです

PromiseのCancelにDOMのイベント処理を利用するのは、名案ですが強引な気もします。
PromiseのCalcelにAbortControllerを使うのが実質的にスタンダードな方法らしい。
※純粋なJavaScriptだけで「cancelable promises」が議論されたこともあったようですが頓挫した様です。

デバッカーで実行の流れを追うとresolve→thenがCallback地獄の糖衣構文なのがわかる

デバッカーによるかもしれませんが、最初の実行の流れでは、Promiseの処理に入らずに、さっさとthenに遷移してなにもせずに抜けてゆくのが見て取れます。
その後にPromiseの中に流れが入り、resolveでPromiseの処理を脱して、thenの記述に遷移する。これ、まさにCallbackそのものです。
この様に泥臭い目視をすることでPromiseの実体が理解できました。
JavaScriptにPromiseを実装したプログラマーさんが、Callback地獄を肩代わりして便利にしてくれている。ご苦労さまです。

下記の２点に気づいたらスッキリと理解した気になった。
・非同期な処理をPromiseで包む。この包んだ部分はresolveかrejectを呼び出すまで復帰しない。
・Promiseで包んだ関数をthen等で組み立てる。thenにはresolve呼び出し時の引数が戻される。chathにはreject呼び出し時の引数が戻される。分かりづらいですね、要はCallbackをスマートに書くための構文です。
例：非同期なXMLHttpRequest(XHR)をPromise化

//XHRをPromiseで部品化
function fetchXHR(URL) {
	return new Promise((resolve, reject) => {
		let req = new XMLHttpRequest();
		req.open('GET', URL, true);
		req.onload = function() {
			if (req.status === 200) {
				resolve(req.responseText);
			} else {
				reject(new Error(req.statusText));
			}
		};
		req.onerror = function() {
			reject(new Error(req.statusText));
		};
		req.send();
	});
}

//部品化したXHRを利用する
let URL = 'http://hogehog.xyz/webdata';
fetchXHR(URL).then((value) => {
	console.log(value);
	・・・読み込んだデータを処理
}).catch((error) => {
	console.error(error);
	・・・読み込みエラーの処理
});

部品のresolveと操作のthenの関係

Promiseの中で記述してあるresolveにXHRのonload(XHRのcallback)に戻ったデータを渡すと、fetchXHR呼び出ししている操作部分のthenの所に書いた関数に結果が渡されてくる。

部品のrejectと操作のcatchの関係

Promiseの中で記述してあるrejectにXHRのonerror(XHRのcallback)に戻されたエラー理由を渡すと、fetchURL呼び出ししている操作部分のcatchの所に書いた関数にエラー内容が渡されてくる。

結局はcallbackを逐次型っぽく、

その操作の流れを解りやすく記述できるのがPromise。
上記のXHRの例のように単純なものなら、従来のcallbakでコーディングしても可読性には大差ありません。

ネット上の実例を見ると「new Promise」や「Promise.resolve」いう書き方があり、落書き人は混乱してしまいました。調べてみると後者は糖衣構文だと判明しました。
さらに後者はPromise非同期処理じゃない関数が呼び出されていたり、落書き人の頭の中はぐ～るぐる、落書き人の頭はHALT状態に陥りました。

例えば

Promise.resolve(42);

new Promise((resolve) => {
	resolve(42);
});

例えば

Promise.reject(new Error("エラー"))

new Promise((resolve, reject) => {
    reject(new Error("エラー"));
});

非同期処理は書いては文献を繰り返し読むことでなるほどとなることがあります。
JavaScript Promiseの本
【JavaScript】Promiseを使った非同期処理
【JavaScript】ちゃんと理解しておきたいPromiseの勘所など
Promiseを複数組み合わせる時の基本パターン（直列、並列、分岐）
Promiseとthenのメソッドチェーン（直列・並列・値の受け取り・引数）
※落書き人のレベルでは完全に読解できていません。:-P