从一脸懵逼到掌握Promise

781 阅读3分钟

从一脸懵逼到掌握Promise

Promise的中文意思就是承诺,承诺的意思就是我等会会给你一个结果。 这也就是大家经常用来描述Promise的话:“它是用来解决异步编程的方案”

那JS中的异步又是什么呢?

什么是异步?

同步:一定要等任务执行完毕,得到结果,才会接着执行下一个任务。

function work1 = function(){
  return '同步任务的返回值'
}
var result = work1() //work1就是同步任务的结果
work2()       //然后执行下一个任务

异步:不等任务执行完,直接执行下一个任务

function work1 = function(){
  var result = setTimeout(function(){
  console.log('异步任务的结果')
  },3000)
  return result
}
var result = work1 //result 不是异步任务的结果,而是一个 timer id
work2() //立即执行其他任务,不等异步任务结束。

这时候我们发现,我们拿到的这个result 不是异步执行的结果,而是一个timer id,我们想要拿到这个异步任务的结果,就要使用回调。

function work1 = function(callback){
 var result = setTimeout(function(){
 callback('异步任务结果')
 },3000)
 return result
}

work1(function callback(result){
  console.log(result) //3秒钟后,这个callback 函数会被执行
})
work2() //立即执行其他任务,不等异步任务结束。

回调」经常用于获取「异步任务」的结果。

Promise出现的原因

我们在看完上面的异步之后,接着来按照上面的思路处理一个网络请求。

// request:一个异步网络请求
// response:网络请求的响应
requset1(function(response1){
    处理response1
})

如果这个时候,我们需要根据第一个请求的结果,再去执行第二个请求。

requset1(function(response1){
    request2(function(response2){
        处理response2
    })
})

如果我们后面还有更多的需求呢? 这时候就出现了大家经常提的回调地狱

result1(function(response1){
    result2(function(response2){
        result3(function(response3){
            result4(function(response4){
                result5(function(response5){
                    result6(function(response3){
                        ...
                    })
                })
            })
        })
    })
})

我们发现根据以往的方案,这种异步会让我们的代码越来越长,难以维护。甚至都有点看不明白。 这时候Promise就出现了。

啥是promise啊?

Promise 是异步编程的一种解决方案,比传统的异步解决方案回调函数事件更合理、更强大。现已被 ES6 纳入进规范中。

我们来改写一下上面臃肿的代码:

  new Promise(request1)
  .then(request2(response1))
  .then(requset3(response2))
  .then(requset4(response3))
  .then(requset5(response4))
  .then(requset6(response5))
  .catch(处理异常(异常信息))

Promise在处理异步的时候,不但写法更优雅,也更容易让人明白,并且能够在外层捕获异步函数的异常信息。

关于promise面试

1.promise的三种状态:

promise有三种状态:pending(等待态),fulfiled(成功态)rejected(失败态)

2.手写一个promise

  function fn(){
  return new Promise((resolve,reject)=>{
    成功时调用 resolve(数据)
    失败时调用 reject(错误)
    })
  }
  fn().then(success,fail).then(success2,fail2)

3.promise.all怎么用?

Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

Promise.all([promise1, promise2]).then(success1, fail1)

promise1promise2都成功才会调用success1

4.promise.rece怎么用?

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

 Promise.race([promise1, promise2]).then(success1, fail1)

promise1promise2只要有一个成功就会调用success1

如果对你有帮助的话,请点个👍吧!我们继续分享更多文章的~

本文使用 mdnice 排版