大保剑：Promise的有趣体验

对于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');
})

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

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

Fun2⬇️

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

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

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

Fun3⬇️

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

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

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

Fun4⬇️

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

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

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

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

END！