从一脸懵逼到掌握Promise

从一脸懵逼到掌握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排版

原文链接:juejin.im

上一篇:被写烂了的Vue组件通信
下一篇:nodeJs模块概览

相关推荐

  • 🔥 Promise|async|Generator 实现&原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    4 个月前
  • 面试题1:Promise递归实现拉取数据

    题目:请用promise递归实现拉取100条数据,每次拉取20条,结束条件为当次拉取不足20条或者已经拉取100条数据 ...

    2 个月前
  • 面试官要求我们手动实现 Promise.all

    情景: 最近面试,有两次被问到手动实现 Promise.all,不幸的是我都没把这题做好。因为我没有去准备这个,我不知道手动实现已有的 API 有什么意义。 但是为了防止以后还会遇到此类题,还是记录下...

    1 个月前
  • 面试官你来,130行带你手写完整Promise

    大家好,我是雷锋蜀黍。一直在某些面试宝典看到面试官要你手撸一个promise,今天天气这么好,不如我们来搞一搞。(PS:从未看过别人的实现,本文更像是记录一个思考的过程) 最终的代码完全符合Promi...

    3 个月前
  • 面试BAT,你凭什么说你掌握了CSS

    介绍 项目已经开源:https://github.com/nanhupatar...(https://github.com/nanhupatar/FEGuide/blob/master/CSS%E...

    2 年前
  • 阅读Promise A+规范

    本文主要是PromiseA规范(https://promisesaplus.com/)的翻译加上个人的理解。 1 什么是Promise A promise represents the eve...

    2 年前
  • 重温一下 JS 进阶需要掌握的 13 个概念

    作者:Nick Scialli 译者:前端小智 来源:hackernoon 阿里云服务器很便宜火爆,今年比去年便宜,10.24~11.11购买是1年86元,3年229元,可以点击 下面...

    9 个月前
  • 通过koa2和Promise.race()构造一个超时取消的ajax。

    MDN上说: 你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使用AbortSignal 对象完成与DOM请求...

    2 年前
  • 通过Iterator控制Promise.all的并发数

    背景 异步是 js 一个非常重要的特性,但很多时候,我们不仅仅想让一系列任务并行执行,还想要控制同时执行的并发数,尤其是在针对操作有限资源的异步任务,比如文件句柄,网络端口等等。 看一个例子。

    8 个月前
  • 这样理解 promise

    官网解释 promise 表示一个异步操作的最终结果。 翻译 ==可以将promise理解为一个状态机==,它存在三种不同的状态,并在某一时刻只能有一种状态 pending 表示还在执行 ...

    1 年前

官方社区

扫码加入 JavaScript 社区