Promise

new Promise((resolveOuter) => {
  resolveOuter(
    new Promise((resolveInner) => {
      setTimeout(resolveInner, 1000);
    }),
  );
});

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 300);
});

myPromise
  .then(handleFulfilledA, handleRejectedA)
  .then(handleFulfilledB, handleRejectedB)
  .then(handleFulfilledC, handleRejectedC);

myPromise
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);

myPromise
  .then((value) => `${value} and bar`)
  .then((value) => `${value} and bar again`)
  .then((value) => `${value} and again`)
  .then((value) => `${value} and again`)
  .then((value) => {
    console.log(value);
  })
  .catch((err) => {
    console.error(err);
  });

const promiseA = new Promise(myExecutorFunc);
const promiseB = promiseA.then(handleFulfilled1, handleRejected1);
const promiseC = promiseA.then(handleFulfilled2, handleRejected2);

const promiseA = new Promise((resolve, reject) => {
  resolve(777);
});
//  "promiseA" 
promiseA.then((val) => console.log("asynchronous logging has val:", val));
console.log("immediate logging");

// 
// immediate logging
// asynchronous logging has val: 777

//  Promises/A+  thenable  onFulfilled 
// 
const thenable = {
  then(onFulfilled, onRejected) {
    onFulfilled({
      // Thenable  Thenable 
      then(onFulfilled, onRejected) {
        onFulfilled(42);
      },
    });
  },
};

Promise.resolve(thenable); //  42 

const pendingPromise = new Promise(() => {});

for (let i = 0; i < 1000; i++) {
  await Promise.race([Promise.resolve(0), pendingPromise]);
}
// pendingPromise  1000 
// 

const myFirstPromise = new Promise((resolve, reject) => {
  // resolve(...) 
  //  reject(...) 
  setTimeout(() => {
    resolve("!"); // 
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage  resolve(...) 
  // 
  console.log(`Yay! ${successMessage}`);
});

// "threshold" 
const THRESHOLD_A = 8; // 0 

function tetheredGetNumber(resolve, reject) {
  setTimeout(() => {
    const randomInt = Date.now();
    const value = randomInt % 10;
    if (value < THRESHOLD_A) {
      resolve(value);
    } else {
      reject(new RangeError(`: ${value}`));
    }
  }, 500);
}

function determineParity(value) {
  const isOdd = value % 2 === 1;
  return { value, isOdd };
}

function troubleWithGetNumber(reason) {
  const err = new Error("", { cause: reason });
  console.error(err);
  throw err;
}

function promiseGetWord(parityInfo) {
  return new Promise((resolve, reject) => {
    const { value, isOdd } = parityInfo;
    if (value >= THRESHOLD_A - 1) {
      reject(new RangeError(`: ${value}`));
    } else {
      parityInfo.wordEvenOdd = isOdd ? "odd" : "even";
      resolve(parityInfo);
    }
  });
}

new Promise(tetheredGetNumber)
  .then(determineParity, troubleWithGetNumber)
  .then(promiseGetWord)
  .then((info) => {
    console.log(`Got: ${info.value}, ${info.wordEvenOdd}`);
    return info;
  })
  .catch((reason) => {
    if (reason.cause) {
      console.error("");
    } else {
      console.error(`promiseGetWord() : ${reason}`);
    }
  })
  .finally((info) => console.log(""));

<button id="make-promise"></button>
<div id="log"></div>

"use strict";

let promiseCount = 0;

function testPromise() {
  const thisPromiseCount = ++promiseCount;
  const log = document.getElementById("log");
  // 
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) <br>`);
  //  1 3 
  const p1 = new Promise((resolve, reject) => {
    // 
    log.insertAdjacentHTML(
      "beforeend",
      `${thisPromiseCount}) Promise <br>`,
    );
    // 
    setTimeout(
      () => {
        // 
        resolve(thisPromiseCount);
      },
      Math.random() * 2000 + 1000,
    );
  });

  //  then() 
  //  catch() 
  p1.then((val) => {
    // Log the fulfillment value
    log.insertAdjacentHTML("beforeend", `${val}) Promise <br>`);
  }).catch((reason) => {
    // Log the rejection reason
    console.log(` (${reason}) `);
  });
  // 
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) Promise <br>`);
}

const btn = document.getElementById("make-promise");
btn.addEventListener("click", testPromise);

<h1></h1>

function imgLoad(url) {
  // Promise() 
  // 2  resolve  reject 
  return new Promise((resolve, reject) => {
    // XHR 
    const request = new XMLHttpRequest();
    request.open("GET", url);
    request.responseType = "blob";
    // 
    request.onload = () => {
      if (request.status === 200) {
        // 
        resolve(request.response);
      } else {
        // 
        reject(
          Error(
            `: + ${request.statusText}`,
          ),
        );
      }
    };
    // 
    request.onerror = () => reject(new Error(""));
    // 
    request.send();
  });
}

// 
const body = document.querySelector("body");
const myImage = new Image();
const imgUrl =
  "https://mdn.github.io/shared-assets/images/examples/round-balloon.png";

//  URL  then() 
// 2 
imgLoad(imgUrl).then(
  (response) => {
    // resolve() 
    //  request.response 
    const imageURL = URL.createObjectURL(response);
    myImage.src = imageURL;
    body.appendChild(myImage);
  },
  (error) => {
    // 2 
    // reject() 
    console.log(error);
  },
);

<!doctype html>
<iframe></iframe>
<!--  -->
<script>
  // 
  const bound = frames[0].postMessage.bind(frames[0], "some data", "*");
  // bound   
  //   
  setTimeout(bound);
  // 
  // 
</script>

<!doctype html>
<iframe></iframe>
<!--  -->
<script>
  // 
  const bound = frames[0].postMessage.bind(frames[0], "some data", "*");
  // bound   
  //   
  Promise.resolve(undefined).then(bound);
  // 
  // 
</script>

<!-- y.html -->
<!doctype html>
<iframe src="x.html"></iframe>
<script>
  const bound = frames[0].postMessage.bind(frames[0], "some data", "*");
  Promise.resolve(undefined).then(bound);
</script>

<!-- x.html -->
<!doctype html>
<script>
  window.addEventListener("message", (event) => {
    document.querySelector("#text").textContent = "hello";
    // 
    console.log(event);
  });
</script>