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

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

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

三、课程讲师：Alex

四、课程内容

Promise的实例方法-then()

（1）什么时候执行

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

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

（2）执行后的返回值

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

      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();

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

return new Promise((resolve) => {

  resolve(123);

});

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第一节课回调地狱的问题解决了，虽然刚开始接触让自己写还是有点难，但是我相信接下来的不断练习可以让自己对知识的掌握更上一层，继续加油！