大保剑: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!

相关推荐
华仔啊16 小时前
摸鱼神器!前端大佬私藏的 11 个 JS 神级 API,复制粘贴就能用,效率翻倍
前端·javascript
念念不忘 必有回响16 小时前
js设计模式-状态模式
javascript·设计模式·状态模式
小桥风满袖16 小时前
极简三分钟ES6 - 箭头函数
前端·javascript
bug_kada16 小时前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
hj5914_前端新手16 小时前
深入分析 —— JavaScript 深拷贝
前端·javascript
jqq66616 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
织_网16 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
yuehua_zhang17 小时前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
EndingCoder20 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手20 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue