一、课程名称：前端工程师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第一节课回调地狱的问题解决了，虽然刚开始接触让自己写还是有点难，但是我相信接下来的不断练习可以让自己对知识的掌握更上一层，继续加油！
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)