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

一、课程名称：前端工程师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的三种状态（非常重要）

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}

（3）then()方法

      p.then(

        (data) => {

          console.log("success");

        },

        (error) => {

          console.log("error");

        }

      );

（4）resolve和reject函数的参数

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

        resolve('succ');

        resolve({username:'alex'});

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

        reject("reason");

        reject(new Error("reason"));

五、课程心得

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