理解javaScript中的Promise与then

2021-05-12 网页编程网 网页编程网

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>promise</title>
</head>
<body>
  <button id="myBtn">出现弹窗</button>
  <div class="modal-wap">
    <header>标题</header>
    <article>
      这是内容
    </article>
    <footer>
      <button id="confirm">确定</button>
      <button id="cancel">取消</button>
    </footer>
  </div>
  <script>
    function dom$(id) {
      return document.getElementById(id);
    }

function modelFun() {
      return new Promise((resolve, reject) => {
        dom$('confirm').onclick = () => {
          resolve()
        }
        dom$('cancel').onclick = () => {
          reject()
        }
      })
    }
    dom$('myBtn').onclick = () => {
      document.querySelector('.modal-wap').style.display = 'block'
      modelFun().then(() => {
          console.log('你点击了确定');
        }, () => {
          console.log('你点击了取消');
        })
        .finally(() => {
          document.querySelector('.modal-wap').style.display = 'none'
        })
    }
  </script>
</body>
</html>

阅读原文

阅读 3083

123 显示电脑版