promises

archive/promise/async-then.js

@@ -0,0 +1,60 @@
+
+````smart header="Handlers are always asynchronous, like `setTimeout(...,0)`"
+Handlers assigned by `.then/catch` are always asynchronous. But if the promise is settled they run as soon as possible, similar to `setTimeout(...,0)`.
+
+Here's the example to demonstrate that:
+
+```js run
+// the promise is immediately resolved with "done!"
+let promise = new Promise(resolve => resolve("done!"));
+
+// alert runs asynchronously, like if it were wrapped in setTimeout(..., 0);
+promise.then(alert); // (2)
+
+alert('code end'); // (1)
+```
+
+We'll first see "code end" `(1)`, and then "done!" `(2)`.
+
+Like if we had this instead of `(2)`:
+```js
+promise.then(result => setTimeout(() => alert(result), 0));
+```
+
+The inner mechanics is like this:
+- Promise handlers form a queue.
+- When the current code is complete, the queue shifts and the next handler is executed.
+````
+
+````smart header="Functions resolve/reject accept at most one argument"
+Functions `resolve/reject` accept only one argument.
+
+We can call them without any arguments too, that's the same as passing `undefined`:
+
+```js run
+let promise = new Promise(resolve => resolve());
+
+promise.then(alert); // undefined
+```
+
+...But if we pass many arguments: `resolve(1, 2, 3)`, then all arguments after the first one are ignored.
+The idea is that a promise may have only one result (or an error). Use objects and destructuring if you need to pass many values, like this:
+
+```js run
+let promise = new Promise(function(resolve, reject) {
+  let name = "John";
+  let age = 25;
+
+  resolve({name, age}); // "pack" the values in an object
+});
+
+// destructuring
+promise.then(function({name, age}) {
+  // here we have name and age variables as if the promise had two results
+  alert(`${name} ${age}`); // John 25
+})
+```
+
+````
+
+

archive/promise/fetch.js

@@ -0,0 +1,37 @@
+## Example: fetch
+
+
+## Example: fetch
+
+Promises are also returned by some built-in browser methods.
+
+For instance, [fetch](https://fetch.spec.whatwg.org/#fetch-method) allows to load arbitrary content over the network. We can use it to send information to the server and load data from it.
+
+The syntax is:
+
+```js
+let promise = fetch(url[, options]);
+```
+
+Here:
+- `url` is the URL to load,
+- `options` are various request options.
+
+There are many options, full information about them is in the [spec](https://fetch.spec.whatwg.org/#requestinit), here we won't need them.
+
+The promise returned by `fetch` resolves with the `response` object when the server responds.
+
+The most important properties of `response` are:
+- `status` -- HTTP-code: 200 for OK, 404 for "Page not found" etc.
+- `headers` -- HTTP headers.
+- 
+
+The important thing
+
+
+```js run
+fetch('/article/promise-chaining/1.html?speed=1')
+  .then(console.log);
+```
+
+

archive/promise/thenable.js

@@ -0,0 +1,23 @@
+function loadScript(src) {  
+  return new Promise(function(resolve, reject) {
+    let script = document.createElement('script');
+    script.src = src;
+
+    script.onload = () => resolve(script);
+    script.onerror = () => reject(new Error("Script load error: " + src));
+
+    document.head.append(script);
+  });
+}
+loadScript("/article/promise-chaining/one.js")
+  .then(script => {
+    return {
+      then(resolve, reject) {
+        setTimeout(() => resolve(script), 1000);
+      }
+    };
+  })
+  .then(function(script) {
+    alert(one);
+  });
+

archive/promise/thenable2.js

@@ -0,0 +1,19 @@
+'use strict';
+
+new Promise()
+  .then(result => {
+    return {
+      then(resolve, reject) {
+        setTimeout(() => resolve("two"), 1000);
+      }
+    };
+  })
+  .then(result => {
+    console.log("HERE", result);
+    return result;
+  })
+  .then(console.log)
+  .catch(err => console.error("ERROR", err));
+
+// https://tc39.github.io/ecma262/#sec-promise-resolve-functions
+