大保剑:Promise的有趣体验

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

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

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

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

Fun1.png

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

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

Fun2⬇️
test1().then(() => {
    test2();
}).then((val) => {
    console.log(val);
    console.log('----2');
})

Fun2.png

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

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

Fun3⬇️
test1().then(test2()).then((val) => {
    console.log(val);
    console.log('------3');
})

Fun3.png

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

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

Fun4⬇️
test1().then(test2).then((val) => {
    console.log(val);
    console.log('------4');
})

Fun4.png

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

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

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

图片.png

END!