为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第25天Promise的实例方法then

【金秋打卡】第25天Promise的实例方法then

2022.11.17 07:48 79浏览

一、课程名称:前端工程师2022版

二、课程章节:ES6之Promise与Class类-Promise

三、课程讲师:Alex

四、课程内容

Promise的实例方法-then()

(1)什么时候执行

1)pending->fulfilled时,执行then的第一个回调函数

2)pending->rejected时,执行then的第二个回调函数

(2)执行后的返回值

then方法执行后返回一个新的Promise对象,此时它也可以调用自己的then方法,直接在后面打点调用即可

 https://img4.sycdn.imooc.com/6370d94d0001a49504200237.jpg

      const p = new Promise((resolve, reject) => {

        // 可以调用resolve或reject来决定p的状态

        resolve();

        // reject();

      });

      // p的成功状态决定了then执行第一个回调函数,如果是失败态,就将执行第二个回调

      // 由于p2返回的是一个新的Promise对象,此时它也可以调用自己的then方法,直接在后面打点调用即可

      const p2 = p.then(

          () => {},

          () => {}

        ).then().then();

      console.log(p, p2, p === p2);

(3)then方法返回的Promise对象的状态改变

1)在then的回调函数中,return后面的东西,会用Promise包装一下,决定后面的then执行哪个回调,默认返回的永远是成功状态的Promise对象,如果想调用reject,就将语句写完整就好

      const p = new Promise((resolve, reject) => {

        resolve();

      });

      p.then(

        () => {

          console.log("success");

        },

        () => {

          console.log("error");

          // 没有返回值,相当于return undefined;等价于返回一个用Promise包装的默认是resolve的语句,所以后面会默认执行resolve();输出success2

          //   return new Promise((resolve) => {

          //  默认情况下调用的是resolve(),且默认参数是undefined,会将undefined传给后面的then

          //     resolve(undefined);

          //   });

          // 所以如果return 123;就相当于

          //   return new Promise((resolve) => {

          //     resolve(123);

          //   });

        }

      ).then(

        // 后面这个then的状态改变需要由前面的then决定

        (data) => {console.log("success2"); },

        () => {console.log("error2"); });

 2)then语句中没有返回值,相当于return undefined;这等价于返回一个用Promise包装的默认是resolve的语句,所以后面的then会默认执行resolve();

 https://img1.sycdn.imooc.com/6370d99b0001803404200237.jpg

3)如果返回值不是undefined,而是123,就等价于resolve(123)

return new Promise((resolve) => {

  resolve(123);

});

 https://img1.sycdn.imooc.com/6370d9ac0001554404200237.jpg

4)小练习:在程序后方再次调用then,此时then的状态应该根据前一个then来,由于前一个then调用的是resolve,所以要看resolve语句,返回的是undefined,等价于new一个新的默认执行的是resolve()的Promise,所以最终执行的是resolve(),返回undefined

(4)使用Promise解决回调地狱

使用Promise解决回调地狱

      // 对盒子添加多层运动

      //  获取元素

      const boxEI = document.getElementById("box");

      // 运动函数

      const move = (el, { x = 0, y = 0 } = {}, end = () => {}) => {

        el.style.transform = `translate3d(${x}px,${y}px,0)`;

        el.addEventListener(

          // 每次动画结束后都会触发事件

          "transitionend",

          () => {

            end();

          },

          false

        );

      };

      // 1、先使用Promise对move进行改造

      const movePromise = (el, point) => {

        return new Promise((resolve) => {

          move(el, point, () => {

            resolve();

          });

        });

      };

      // 2、书写点击事件

      document.addEventListener(

        "click",

        () => {

          movePromise(boxEI, { x: 150 })

            .then(() => {

              return movePromise(boxEI, { x: 150, y: 150 });

            })

            .then(() => {

              return movePromise(boxEI, { y: 150 });

            })

            .then(() => {

              return movePromise(boxEI, { x: 0, y: 0 });

            });

        },

        false

      );

五、课程心得

今天是金秋打卡的第25天,转眼间坚持每天打卡已经这么久啦,感觉这25天每天坚持笔记输出,学习课程都更加有了动力,今天又学习了Promise中很重要的then()方法,将Promise第一节课回调地狱的问题解决了,虽然刚开始接触让自己写还是有点难,但是我相信接下来的不断练习可以让自己对知识的掌握更上一层,继续加油!

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消