Promise

52 阅读1分钟

Promise存在的意义

说到Promise就不得不提到异步编程,因为在大多数的场景下,Promise都给异步任务提供了一种很方便的方案,像我们一般使用的axios中就用到了Promise,那么相比于传统的使用回调函数的方案,Promise对于异步编程又提供了什么好处呢

$.ajax({
  url: 'xxxxxxxxxxx',
  success (data) {
    console.log(data)
  }
})

这是传统的使用回调函数方式处理网络请求,这样的模式其实是有着对应的缺陷的,对于处理后台返回的数据来说,只能在success函数中进行处理

我们再来看看Promise是怎么处理异步任务的

// Promise内部的函数是同步执行的
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 2000)
})

// then是异步执行的
promise.then(res => {
  console.log(res)
})

对于Promise和传统的回调函数解决异步编程的方案来说,他最大的好处就是把返回的结果对外抛出,让开发者可以通过then的方式来单独的进行数据的处理,设置then方法为异步任务,也是为了不干扰其他同步任务的执行

回调地狱

其实一般来说谈到Promise就会谈到回调地狱问题,首先我们来了解下什么是回调地狱的问题

$.ajax({
  url: 'xxxxx',
  success (data1) {
    $.ajax({
      url: 'xxxxxx',
      data: data1,
      success (data2) {
        $.ajax({
          url: 'xxxxxx',
          success (data3) {
          }
        })
      }
    })
  }
})

如上图所示,一个回调函数中不断的嵌入另一个回调函数,这样的代码就不利于维护和开发,因为就算出问题了也不知道是哪里出的问题,然后我们再来看看Promise的写法

new Promise((resolve, reject) => {
  $.ajax({
    url: 'xxxxxx',
    success (data) {
      resolve(data)
    }
  })
}).then(res => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'xxxxx',
      data: res,
      success (data) {
        resolve(data)
      }
    })
  })
})

如图所示,通过链式调用的方式看上去确实方便了一点,但是也没有方便太多,如果想让异步任务同步化可以使用asyncawait

总结

Promise从设计的角度来说就是表示的是一种承诺,当resolve任务完成时将承诺后的结果抛出做进一步的处理,当reject承诺失效把失效的原因抛出做进一步的处理,我觉得相比于传统的回调函数只在函数内部进行处理的方式,Promise这个将结果或者原因抛出的方式能很好的将流程给切割开来,并且采用异步调用的方式和其他的任务之间分隔开也不会影响其他程序