为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第24天初识Promise

【金秋打卡】第24天初识Promise

2022.11.16 07:58 76浏览

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

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

三、课程讲师:Alex

四、课程内容

初识Promise

1、Promise是什么

(1)认识Promise

Promise是异步操作的一种解决方案,常见的异步操作的解决方法如回调函数

        // 回调函数

        document.addEventListener('click',()=>{

            console.log('这里是异步的');

        },false);

        console.log('这里是同步的');

(2)什么时候使用Promise

Promise一般用来解决层层嵌套的回调函数(回调地狱callback hell)的问题

      // 如对盒子添加多层运动

      //  获取元素

      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

        );

      };

      // 点击事件:已经构成层层回调的嵌套函数了,即回调地狱,一旦需要修改代码,就非常困难,要了老命,此时就需要使用Promise

      document.addEventListener(

        "click",

        () => {

          move(boxEI, { x: 150 }, () => {

            move(boxEI, { x: 150, y: 150 }, () => {

              move(boxEI, { y: 150 }, () => {

                move(boxEI, { x: 0, y: 0 });

              });

            });

          });

        },

        false

      );

 2、Promise的基本用法(重点)

(1)实例化构造函数生成实例对象

      console.log(Promise);//一般不这样使用Promise

      // 注意Promise解决的不是回调函数,而是回调地狱

      const p = new Promise(() => {});

(2)Promise的三种状态(非常重要)

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

1)PromiseState有3种

①一开始是pending(未完成)

②执行resolve,变成fulfilled(resolved),已成功

③执行reject,变成rejected,已失败

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

        // pending->fulfilled

        // resolve();

        // pending->rejected

        // reject();

      });

      console.log(p);

2)Promise的状态一旦变化,就不会再改变了

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

        resolve();

        reject();

      });

      console.log(p);  //Promise {<fulfilled>: undefined}

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

(3)then()方法

 https://img3.sycdn.imooc.com/6370d6e00001903d04200237.jpg

      p.then(

        (data) => {

          console.log("success");

        },

        (error) => {

          console.log("error");

        }

      );

 

(4)resolve和reject函数的参数

1)resolve函数的参数:如传入“成功”、传入一组数据都是可以的,then()方法会进行接收

        resolve('succ');

        resolve({username:'alex'});

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

2)reject函数的参数:如传入“失败的原因”、错误对象等,then()方法会进行接收

        reject("reason");

        reject(new Error("reason"));

https://img3.sycdn.imooc.com/6370d6fe0001e49c04200237.jpg

五、课程心得

今天初识了Promise,对于Promise的基本用法、状态和参数等知识进行了学习,但是对于Promise该如何解决回调地狱的问题还没有学习到,感觉就像进阶打怪,有更大的Boss在后面等着自己去挑战,期待后面的课程。


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

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

评论

作者其他优质文章

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

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消