es5中的回调函数和es6中的Promise对象理解

不念不忘少年蓝@ 2023-06-30 01:39 36阅读 0赞

es5中的回调函数指的是一个函数作为参数传递到另一个函数中，这个作为参数的函数就是回调函数，下面以代码来仔细说明：

function text(){  //回调函数--作为参数
      console.log('111');
    }
    function last(func){
      func()
    }
    last(text);

以上只是调用一次函数的情况，当我们调用多次函数的时候，并且每一个函数都嵌套起来，这样就会代码变得冗余，如下所示：

// 多次调用函数并嵌套
    function calltest(call){
      setTimeout(function(){
        call()
      },1000)
    }
    //循环调用--每隔一秒调用一次韩式calltest打印出结果
    calltest(function(){
      console.log(111)
      calltest(function(){
        console.log(222)
        calltest(function(){
          console.log(333)
          calltest(function(){
            console.log(444)
          })
        })
      })
    })

这时候我们就可以使用es6的Promise对象，Promise是一种异步编程，比es5的回调函数和事件更加的便捷，Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Fulfilled（已成功）、Rejected（已失败）。以下使用代码示例表示这个过程：

// Promise对象
    function callbast(){
      return  new Promise((resolve,reject) => {
        setTimeout(()=> {
          resolve()
        },1000)
      })
    }
    
    callbast().then(() => {
      console.log(111)
      return callbast()
    }).then(() => {
      console.log(222)
      return callbast()
    }).then(() => {
      console.log(333)
      return callbast()
    }).then(() => {
      console.log(444)
      return callbast()
    })

该种写法和上边的es5写法是一样的，都会每个一秒打印出结果，Promise通过then方法实现，then方法可以接受两个回调函数做为参数，第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是函数是Promise对象的状态变为Rejected的时候调用。所以以上代码才会在函数callbast中的Promise对象中调用resolve，下面callbast函数调用之后使用then方法中返回函数callbast是重新创建一个Promise对象，实现函数的回调。