JavaScript

<button id="make-promise">Make a 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}) Started<br>`);
   // 我们创建一个新的 Promise：我们承诺在等待 3 秒后，兑现从 1 开始计数的数字
  const p1 =  new  Promise((resolve, reject) => {
     // 执行器函数被调用，并具有解决或拒绝该 Promise 的能力
    log.insertAdjacentHTML(
       "beforeend" ,
      `${thisPromiseCount}) Promise constructor<br>`,
    );
     // 这只是一个创建异步操作的示例
    setTimeout(
      () => {
         // We fulfill the promise
        resolve(thisPromiseCount);
      },
      Math.random() * 2000 + 1000,
    );
  });

   // 我们使用 then() 来定义 Promise 被解决时的操作，
   // 并使用 catch() 来定义 Promise 被拒绝时的操作
  p1.then((val) => {
     // 打印兑现值
    log.insertAdjacentHTML( "beforeend" , `${val}) Promise fulfilled<br>`);
  }). catch ((reason) => {
     // 打印拒绝原因
    console.log(`Handle rejected promise (${reason}) here.`);
  });
   // 结束
  log.insertAdjacentHTML( "beforeend" , `${thisPromiseCount}) Promise made<br>`);
}

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