认识promise：相较于普通回调函数、Promise具有保存状态的特点

普通的回调函数

没错，如你所想，点击事件一旦触发以后就结束了，你无法保证这个点击事件的状态保持存在。（不排除可以使用定时器的方案延时获取状态，但这个定时器的指定一定是在回调函数触发之前）

<body>

  <button @click="btnClick">按钮</button>

  <script>
    let Btn = document.querySelector('button')

    Btn.onclick = function () {
      console.log('我被点击了'); //'我被点击了'
      // 做一些操作，这个状态不能保留
    }
  </script>
</body>

Promise

在promise中，一个回调函数的执行结果的状态可以得到保持，可以在promise状态发生改变后的时间里去拿到这个状态做一些处理（需要做处理的时间不需要在Promise状态改变之前就提前指定）：很方便只需要.then就可以。

<body>

  <button @click="btnClick">按钮</button>

  <script>
    let Btn = document.querySelector('button')

    let P1 = new Promise(function (resolve, rej) {
      Btn.onclick = function () {
        //异步任务成功执行后，promise改变状态为resolve，状态改变以后不能再次改变状态，
        //并且随时可以获取这个状态
        resolve('我被点击了');
       // 状态改变并保留
      }
    })

    P1.then(resolve => {
      // 做一些操作
      console.log(resolve); //'我被点击了'
    })

    setTimeout(function () {
      // 一段时间后做一些操作：由于状态改变为resolve，所以状态改变后的时间里都可以获取这个状态
      P1.then(resolve => {
        console.log(resolve);//'我被点击了'
      })
    }, 5000)

  </script>
</body>

总结：promise可以在状态改变以后再指定回调函数（使用已经产生的状态）：（promise可以在状态改变之后再指定回调函数），而普通回调函数指定回调函数一定是在函数调用之前（必须在函数调用之前指定回调函数）。

posted @ 2020-11-21 15:00  17135131xjt  阅读(157)  评论(0)    收藏  举报