资讯专栏INFORMATION COLUMN

Promise构造函数和then方法的执行顺序

Cruise_Chan / 2228人阅读

摘要:的基本用法如果执行失败,则调用如果执行成功,则调用如果执行成功,则继续调用方法如果执行失败,则用捕获失败在的内部,执行顺序是同步的。

Promise的基本用法
  let promise = new Promise((resolve, reject) => {
        console.log(1)
        // 如果执行失败,则调用reject()
        // reject("fail")
        
        console.log(2)
        
        // 如果执行成功,则调用resolve()
        resolve("success")
      })

      // 如果执行成功,则继续调用then方法
      promise.then(res => {
        // console.log(res)
        console.log(3)
      })

      // 如果执行失败,则用catach捕获失败
      promise.catch(err => {
        console.log(err)
        console.log(4)
      })

Promise的内部,执行顺序是同步的。其次等内部执行完成后,调用再选择调用thenorcatch方法。

所以这次输出的结果:

1
2
3
then的执行顺序
   let promise = new Promise((resolve, reject) => {
        console.log(1)
        // 如果执行失败,则调用reject()
        // reject("fail")
        console.log(2)
        // 如果执行成功,则调用resolve()
        resolve("success")
      })

      // 如果执行成功,则继续调用then方法
      promise.then(res => {
        console.log(res)
        console.log(3)
      })

      // promise内部是同步的,但是then方法是异步的
      console.log(5)

then方法执行是异步的,不用等到then的方法结果,会直接执行console.log(5)

1
2
5
3
我们可以根据上面的代码,丰富业务实际情况
      let promise = new Promise((resolve, reject) => {
        console.log(`开始执行`)
        
        // 如果执行成功,则调用resolve()
        resolve("success")
        
        console.log(`执行中ing`)
      }).then(res => {
        console.log(res)
        console.log("执行成功,继续执行下一步")
        return "第二then方法,开始"
      })

      // 如果执行成功,则继续调用then方法
      promise.then(res => {
        console.log(res)
      })

      // promise内部是同步的,但是then方法是异步的
      console.log(`我会在then方法前,先执行`)
      
      // 我们可以利用timeout方法在then方法执行完成后,进行执行
      setTimeout(()=>console.log(`then方法执行完成后,开始执行`))
执行结果:
1.开始执行
2.执行中ing
3.我会在then方法前,先执行
4.执行成功,继续执行下一步
5.第二then方法,开始
6.then方法执行完成后,开始执行
总结

其实比较好理解的方式是:每次当promise执行完成后,then是异步的,所以当执行then后,不会等它的结果,会直接执行下面的代码,但是setTimeout定时器本身会将执行内容调到任务队列尾部,所以会等then方法执行完成后才会调用定时器。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106657.html

相关文章

  • 关于promise小结

    摘要:则是把类似的异步处理对象和处理规则进行规范化,并按照采用统一的接口来编写,而采取规定方法之外的写法都会出错。这个对象有一个方法,指定回调函数,用于在异步操作执行完后执行回调函数处理。到目前为止,已经学习了创建对象和用,方法来注册回调函数。 Promise 本文从js的异步处理出发,引入Promise的概念,并且介绍Promise对象以及其API方法。 js里的异步处理 可以参考这篇文章...

    Tony_Zby 评论0 收藏0
  • ES6 Promise 全面总结

    摘要:它们其实是在运行完成后,主动向该回调函数中传入的参数。该方法其实是的别名,用于指定状态转为失败时的回调函数。构造器回调函数参数中的和用于更改当前的状态,并将其值返回给当前的方法的参数。 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中。 @-v-@ 1. Promise本质 Promise本质上是一个 函数 ...

    Towers 评论0 收藏0
  • build your promise step by step

    摘要:对象有个属性,一个为,方法里面注入的回调函数,用来对传入的上一个传递过来的值进行处理另一个为,构造函数内部定义的方法,用来改变状态以及值。通过再次对构造函数的加强,完成了链式调用的功能。 最近看了一篇关于Promise内部实现原理的文章Javascript in wicked detail。作者从简明的例子入手,一步一步的构建健壮的Promise实现。我就拿作者文中的代码实例梳理下文章...

    Jason 评论0 收藏0
  • Promise构造函数来解决地狱回调问题

    摘要:简介是一个构造函数,既然是构造函数,那么,我们就可以得到一个的实例在上,有两个函数,分别叫做成功之后的回调函数和失败之后的回调函数在构造函数的属性上,有一个方法,也就说,只要是构造函数创建的实例,都可以访问到方法表示一个异步操作每当我们一个 简介 Promise 是一个 构造函数,既然是构造函数, 那么,我们就可以 new Promise() 得到一个 Promise 的实例; 在...

    darryrzhong 评论0 收藏0
  • 异步发展流程 —— 手写一个符合 Promise/A+ 规范 Promise

    摘要:构造函数的实现我们在使用的时候其实是使用关键字创建了一个的实例,其实是一个类,即构造函数,下面来实现构造函数。 showImg(https://segmentfault.com/img/remote/1460000018998456); 阅读原文 概述 Promise 是 js 异步编程的一种解决方案,避免了 回调地狱 给编程带来的麻烦,在 ES6 中成为了标准,这篇文章重点不是叙...

    UnixAgain 评论0 收藏0

发表评论

0条评论

Cruise_Chan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<