大保剑:Promise的有趣体验

对于ES6的Promise到如今已经跨过了ES7的一个版本了,下面介绍的这些玩意,看了千万要忍住了,如果你一眼看了感觉"so easy",那么恭喜你,收下我这个小菜鸟吧😄!
看!👇的代码,为了看的更加清楚,这里不做异常处理了!
javascript 复制代码
// 首先先定义两个变量式函数吧!
let test1 = () => {
    return new Promise((resolve, reject) => {
        resolve('test1...');
    })
}

let test2 = () => {
    return 'test2...';
}
下面开始忽悠...

这里先对Promise的then(onFulfilled, onRejected)中的两个参数的做一个了解,这两个参数都是可选的:(ps: 这里不对onRejected做梳理)。

  • 如果onFulfilled不是函数,就会忽略该参数
  • 如果onFulfilled是函数,就会将onFulfilled中的返回值作为下一个then函数的参数使用
Fun1⬇️
javascript 复制代码
test1().then(() => {
    return test2();
}).then((val) => {
    console.log(val);
    console.log('---->1');
})

######这个结果为什么会这样呢?

这是因为在第一个then函数中有返回值(return 'test2'),作为第二个then函数的参数传递,所以...嗯!

Fun2⬇️
javascript 复制代码
test1().then(() => {
    test2();
}).then((val) => {
    console.log(val);
    console.log('----2');
})
这个结果为什么会这样呢?

这是因为第一个then()函数中没有返回值,所以默认当作undefined处理,结果就是这样了...

Fun3⬇️
javascript 复制代码
test1().then(test2()).then((val) => {
    console.log(val);
    console.log('------3');
})
这个结果为什么会这样呢?

这是因为第一个then()函数里根本就不是一个函数,而是一个字符串,看上面的提前解读,不是函数的时候就会被忽略,自动寻找上一个then()的返回值,这里使用的是resolve()里的值,即'test1...'

Fun4⬇️
javascript 复制代码
test1().then(test2).then((val) => {
    console.log(val);
    console.log('------4');
})
这个结果为什么会这样呢?

这是因为第一个then()函数里的test2作为回调函数传递了进去,进而该then()函数就会有返回值了(return 'test2...'),这样就可以作为第二个then函数的参数传递进去了...gg!

最后,附上一张图,可能会更加直观。

END!

相关推荐
南玖i32 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
YAY_tyy38 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy5 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法7 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴8 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.8 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰8 小时前
vue核心原理实现
前端·javascript·vue.js