how can I see rejections being generated for a promise-CodePudding

"use strict";

let promiseCount = 0;

function testPromise() {
  const thisPromiseCount =   promiseCount;
  const log = document.getElementById("log");
  // begin
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) Started<br>`);
  // We make a new promise: we promise a numeric count of this promise,
  // starting from 1 (after waiting 3s)
  const p1 = new Promise((resolve, reject) => {
    // The executor function is called with the ability
    // to resolve or reject the promise
    log.insertAdjacentHTML(
      "beforeend",
      `${thisPromiseCount}) Promise constructor<br>`
    );
    // This is only an example to create asynchronism
    setTimeout(() => {
      // We fulfill the promise
      resolve(thisPromiseCount);
    }, Math.random() * 2000   1000);
  });

  // We define what to do when the promise is resolved with the then() call,
  // and what to do when the promise is rejected with the catch() call
  p1.then((val) => {
    // Log the fulfillment value
    log.insertAdjacentHTML("beforeend", `${val}) Promise fulfilled<br>`);
  }).catch((reason) => {
    // Log the rejection reason
    console.log(`Handle rejected promise (${reason}) here.`);
  });
  // end
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) Promise made<br>`);
}

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

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

with refer to promises how do i manually generate a rejected promise or under what circumstances will this code run rejections,please provide some practical concepts so that I can see following error message, please refer in snippet: console.log(Handle rejected promise (${reason}) here.);

CodePudding user response：

Try testing promise rejection by generating rejected promises in the timeout code run within the promise executor function - meaning in the function passed to the global Promise constructor as its argument.

A simple approach might be to reject odd numbered promises while resolving even numbered promises with a settled value. The code below does this if you need an example. It also logs promise rejection in HTML.

"use strict";

let promiseCount = 0;

function testPromise() {
  const thisPromiseCount =   promiseCount;
  const log = document.getElementById("log");
  // begin
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) Started<br>`);
  // We make a new promise: we promise a numeric count of this promise,
  // starting from 1 (after waiting 3s)
  const p1 = new Promise((resolve, reject) => {
    // The executor function is called with the ability
    // to resolve or reject the promise
    log.insertAdjacentHTML(
      "beforeend",
      `${thisPromiseCount}) Promise constructor<br>`
    );
    // This is only an example to create asynchronism
    setTimeout(() => {
      // We fulfill the promise on odd calls, reject on even calls
      (thisPromiseCount % 2 ? reject : resolve) (thisPromiseCount);
    }, Math.random() * 2000   1000);
  });

  // We define what to do when the promise is resolved with the then() call,
  // and what to do when the promise is rejected with the catch() call
  p1.then((val) => {
    // Log the fulfillment value
    log.insertAdjacentHTML("beforeend", `${val}) Promise fulfilled<br>`);
  }).catch((reason) => {
    // Log the rejection reason
    console.log(`Handle rejected promise (${reason}) here.`);
   log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) Promise rejected<br>`)
  });
  // end
  log.insertAdjacentHTML("beforeend", `${thisPromiseCount}) Promise made<br>`);
}

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

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