https://harald.ist.org/paste/nested_promise.html
1<!DOCTYPE html><html lang="en" tabindex="0"><head><meta charset="UTF-8"><script>
2
3/* Simulated Results (Checkbox Values) */
4var already_logged_in, requires_confirmation, value_is_sane, execution_success;
5
6
7/* Program Flow Tracking */
8function log( text, clear = false ) {
9 if (clear) document.querySelector("pre").innerHTML = "";
10 document.querySelector("pre").innerHTML
11 += text
12 .replace(/resolving/g, "<b>resolving</b>")
13 .replace(/rejecting/g, "<i>rejecting</i>")
14 .replace(/success/g, "<b>success</b>" )
15 .replace(/failure/g, "<i>failure</i>" )
16 + "\n";
17}
18
19
20/* Dialog Window */
21var Popup = function( message, buttons, add_password_input = false ) {
22 const DIV = document.createElement("div");
23 const P = document.createElement("p");
24 const INPUT = document.createElement("input");
25
26 DIV.className = "popup";
27 P.innerHTML = message;
28
29 document.body.appendChild(DIV);
30 DIV.appendChild(P);
31
32 if (add_password_input) {
33 DIV.appendChild(INPUT);
34 INPUT.value = "correct";
35 }
36
37 buttons.forEach( (definition)=>{
38 const BUTTON = document.createElement("button");
39 DIV.appendChild(BUTTON);
40 BUTTON.innerHTML = definition.label;
41 BUTTON.addEventListener("click", ()=>{
42 document.body.removeChild(DIV);
43 });
44 BUTTON.addEventListener("click", ()=>{
45 const password = (add_password_input) ? INPUT.value : "" ;
46 definition.callback(password);
47 });
48 });
49}
50
51
52/*** DataSouce Object ***/
53
54/* Target path valid? */
55function check_sanity() {
56 log("\n> check_sanity");
57
58 return new Promise( (resolve, reject)=>{
59 window.setTimeout( ()=>{
60 if (value_is_sane) {
61 log("4 check_sanity: resolving (SANITY_SUCCESS)");
62 resolve("SANITY_SUCCESS");
63 } else {
64 log("4 check_sanity: rejecting (SANITY_FAILURE)");
65 reject("SANITY_FAILURE");
66 }
67 });
68 });
69}
70
71/* Not logged in, ask for password */
72function request_credentials() {
73 log("\n> request_credentials");
74
75 return new Promise( (resolve, reject)=>{
76
77 function verify_password( password, remaining_attempts ) {
78 // Simulated AJAX Request:
79 window.setTimeout( ()=>{
80 if (password == "correct") {
81 log("3 request_credentials: resolving (PASSWORD_SUCCESS)");
82 resolve("PASSWORD_SUCCESS");
83 } else {
84 show_login_dialog(remaining_attempts - 1); // Try again
85 }
86 });
87 }
88
89 function show_login_dialog( remaining_attempts = 3 ) {
90 log(" Remaining attempts: " + remaining_attempts);
91
92 if (remaining_attempts == 0) {
93 log("3 request_credentials: rejecting (PASSWORD_WRONG)");
94 reject("PASSWORD_WRONG");
95 } else {
96 const button_ok = {
97 "label": "OK",
98 "callback": (password)=>verify_password(password, remaining_attempts),
99 };
100 const button_abort = {
101 "label": "Abort",
102 "callback": ()=>{
103 log("3 request_credentials: rejecting (PASSWORD_ABORT)");
104 reject("PASSWORD_ABORT");
105 },
106 };
107 new Popup(
108 "Enter Password",
109 [button_ok, button_abort],
110 /*show password input*/true
111 );
112 }
113 }
114
115 show_login_dialog();
116 });
117}
118
119/* User already logged in? */
120function check_credentials() {
121 log("\n> check_credentials");
122
123 if (already_logged_in) {
124 // Yes: Allow operation
125 log("2 check_credentials: success (ALREADY_LOGGED_IN)");
126 return Promise.resolve("ALREADY_LOGGED_IN");
127 } else {
128 // No: ask for password first
129 log("2 check_credentials: Not logged in, requesting credentials");
130 return request_credentials();
131 }
132}
133
134/* "Are you sure?"-Dialog */
135function request_confirmation() {
136 log("\n> request_confirmation");
137
138 if (requires_confirmation) {
139 return new Promise( (resolve, reject)=>{
140 const button_confirm = {
141 "label": "Abort",
142 "callback": ()=>{
143 log("5 request_confirmation: rejecting (CONFIRMATION_ABORT)");
144 reject("CONFIRMATION_ABORT");
145 }
146 };
147 const button_abort = {
148 "label": "Confirm",
149 "callback": ()=>{
150 log("5 request_confirmation: resolving (CONFIRMATION_SUCCESS)");
151 resolve("CONFIRMATION_SUCCESS");
152 }
153 }
154 new Popup("Confirm Operation", [button_confirm, button_abort]);
155 });
156 } else {
157 log("5 request_confirmation: resolving (CONFIRMATION_NOT_NEEDED)");
158 return Promise.resolve("CONFIRMATION_NOT_NEEDED");
159 }
160}
161
162/* Send command to PHP endpoint */
163function execute( ) {
164 log("\n> execute");
165
166 return new Promise( (resolve, reject)=>{
167 // Simulated AJAX Request:
168 window.setTimeout( ()=>{
169 if (execution_success) {
170 log("6 execute: resolving (EXECUTION_SUCCESS)");
171 resolve("EXECUTION_SUCCESS");
172 } else {
173 log("6 execute: rejecting (EXECUTION_FAILURE)");
174 reject("EXECUTION_FAILURE");
175 }
176 });
177 });
178}
179
180/* Public method; Execute operation transparently, asking for password, confirmation, etc. */
181function operation() {
182 log("\n> operation");
183 return check_credentials().then(check_sanity).then(request_confirmation).then(execute);
184}
185
186
187/*** Client program using the DataSource ***/
188
189function start() {
190 // Get chosen circumstances for the test
191 already_logged_in = document.querySelector("#loggedin").checked;
192 requires_confirmation = document.querySelector("#confirm" ).checked;
193 value_is_sane = document.querySelector("#saneval" ).checked;
194 execution_success = document.querySelector("#success" ).checked;
195
196 log("> start", /*clear*/true)
197 log("1 Already logged in: "+already_logged_in );
198 log(" Requires confirmation: "+requires_confirmation);
199 log(" Value is sane: "+value_is_sane );
200 log(" Execution succeeds: "+execution_success );
201
202 operation().then( (result)=>{
203 log("\n> Final: success ("+result+")");
204 }).catch( (result)=>{
205 log("\n> Final: failure ("+result+")");
206 });
207}
208</script><style>
209b { color:#080; font-weight:normal; }
210i { color:#a00; font-style:normal; }
211label, button { display:block; }
212.popup {
213 position:absolute; top:0; width:25em; margin:1em auto;
214 border:solid 1px #000; background:#ffe; text-align:center;
215}
216.popup button { display:inline-block; margin:0.5em; }
217</style></head><body><h1>Promise Chain Test</h1>
218<p>Simulated circumstances for DataSource object:</p>
219<label><input type="checkbox" id="loggedin" xchecked=""> Already logged in</label>
220<label><input type="checkbox" id="confirm" checked=""> Operation requires confirmation (delete, overwrite)</label>
221<label><input type="checkbox" id="saneval" checked=""> Value is sane (file name is valid)</label>
222<label><input type="checkbox" id="success" checked=""> Execution successful (no errors in PHP script)</label>
223<p><button onclick="start()">Start</button></p>
224<pre></pre>
225</body></html>

Every program ends, but not all of them halt.

Promise Chain Test

Simulated circumstances for DataSource object:

Already logged in Operation requires confirmation (delete, overwrite) Value is sane (file name is valid) Execution successful (no errors in PHP script)