javascript - promise - 《JavaScript 从入门到进阶》

为什么使用promise
解密Promise核心
回调函数
链式调用
Promise常用Api
异步代码同步化
- async await

号外号外：本篇文章主要使用了ES6箭头函数，如果不熟悉的同学建议看一看。嘻嘻

开篇之前先理清下面几个问题
Promise的构造函数参数可以传递什么类型？除了使用Promise构造函数进行链式调用外，Promise还有什么方式进行链式调用吗？
Promise.resolve（）的参数可以传递什么类型的数据？不同类型的数据产生怎样的结果？
Promise的构造函数中调用resolve()/reject()这样做的目的是什么？
Promise的then方法是做什么的？
如何终止链式调用？（这个场景会在什么时候遇到）
如何把promise的代码转化为async await的调用方式
进阶：手写Promise（哈哈是不是有点招人恨的样子…）

从第一个问题开始：Promise的构造函数参数必须是函数，函数有两个参数一个是resolve，一个是reject。除了Promise构造函数进行链式调用外，Promise.resolve（）也可以进行链式调用，不过他的参数多数是基本数据类型会进行值穿透。
第二个问题：Promise.resolve（）的参数是基本数据类型，会导致值传递
第三个问题：Promise的构造函数中调用resolve()/reject()这样做的目的是触发then的回调函数（resolve调用成功的回调，reject调用失败的回调）并且修改Promise的状态。状态有pending 转化为fulfilled或者rejected。
第四个问题：Promise的then方法可以返回上一个Promise的回到结果，也可以return一个新的Promise，从而实现链式调用
第五个问题：then返回一个空的Promise对象即可
第六个问题：
第七个问题：

为什么使用promise

解决回调地狱的代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象。其次promise可以支持多个并发的请求，获取并发请求中的数据

常规回调方式实现：

setTimeout(() => {
    console.log('1');
    setTimeout(() => {
        console.log('2');
        setTimeout(() => {
            console.log('3');
            setTimeout(() => {
                console.log('4');
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);

promise方式实现：

function getStr1() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('1');
        }, 1000);
    });
}
function getStr2() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('2');
        }, 1000);
    });
}
function getStr3() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('3');
        }, 1000);
    });
}
function getStr4() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('4');
        }, 1000);
    });
}
getStr1().then((data) => {
    console.log(data);
    return getStr2();
}).then((data) => {
    console.log(data);
    return getStr3();
}).then((data) => {
    console.log(data);
    return getStr4();
}).then((data) => {
    console.log(data);
})

如果我们使用Promise去实现这个效果，虽然代码量不会减少，甚至更多，但是却大大增强了其可读性和可维护性

解密Promise核心

通过上面几个问题能感受到Promise更像一个保存状态的魔法罐，只要状态改变就可以就能一直传递下去，并且状态持久的保存在自己身上，随时都可以then函数的调用。其次状态是不可逆的，只能从pending 转化为fulfilled或者rejected。总结一句话就是状态就是Promise的灵魂所在，状态使用resolve或者reject管理的。接下来通过几个例子来理解Promise
例一：
首先需要知道Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的，方便下面工作进行

        let promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success')
            }, 3000)
        })
        promise.then((data) => {
            console.log(data)
            console.log('resolved===', promise)
        })
        console.log('pengding====', promise)

输出结果：

如果我这里把resolve(‘success’)注释掉会发生什么事情呢？有的同学会说then函数不再往下执行，恭喜你答对了，给你一个大大的赞！！！

就像上面七个问题中提到过的一样，resolve触发Promise状态的改变，然后触发then回调函数的调用，如果注释resolve(‘success’)，那么整个链路就暂停了。是不是瞬间感受到状态是如何支撑Promise 运转的了。接下来再看看Promise 具有状态缓存的特性，国际惯例还是用例子引出我们的理论

        let promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success')
            }, 3000)
        })
        promise.then((data) => {
            console.log("data1===" + data)
            console.log('resolved===', promise)
        })
        promise.then((data) => {
            console.log("data2===" + data)
            console.log('resolved===', promise)
        })
        promise.then((data) => {
            console.log("data3===" + data)
            console.log('resolved===', promise)
        })
        console.log('pengding====', promise)

只要状态从pending 转化为resolved或者rejected之后，不管我们什么时候调用，都能拿到回调结果，但是这样做有什么好处呢？

回调函数

我们花费了大半篇文稿讲述Promise的状态管理，目的是什么？总不能做事情没目的吧！作为名侦探柯南的黑粉我要出来指证！！！目的就是触发then函数拿到回调结果，然后就可以为所欲为了。接下来就看看怎么拿到回调函数的

        let promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success')
                // reject("fail")
            }, 1000)
        }).then(resolved => {
            console.log("resolved===" + resolved)
        }, rejected => {
            console.log("rejected===" + rejected)
        })
        console.log('pengding====', promise)

then函数传入两个参数，第一个参数代表成功的回调，第二个参数代表失败的回调，注意参数使用函数的形式，如果参数使用基本数据类型就会出现值穿透，小伙伴后果自负哟！！！函数的参数就是我们的回调结果，是不是还是以往的那么稳妥。对于没有成功回调的我们可以使用null代替，例子

        let promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('success')
                reject("fail")
            }, 1000)
        }).then(null, rejected => {
            console.log("rejected===" + rejected)
            return new Promise((resolve, reject) => {
                reject(100)
            })
        }).then(null,reject => {
            console.log("=====" + reject)
        })

对于then的参数期望是函数，传入非函数则会发生值穿透。

        Promise.resolve(1)
            .then(2)
            .then("3")
            .then(data => { console.log(data) })

链式调用

既然我们已经知道如何通过改变Promise的状态然后拿到回调结果，那我们就很容易实现链式调用了。这里就不卖关子了，我们让then回调函数返回一个新的Promise，这样就实现了链式调用，是不是很机智！！！至此那个男孩从此不再那么天真。。。一切没有使用案例的理论都是耍流氓，这里问题不大，不就是一个案例吗？？？哭笑脸

        let peopleObj = { name: "taowuhua", age: 18 }
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success')
            }, 100)
        }).then(resolved => {
            console.log("第一次链式调用结果" + resolved)
            return new Promise((resolve, reject) => {
                resolve(JSON.stringify(peopleObj))
            })
        }).then(resolved => {
            console.log("第二次链式调用结果" + resolved)
            return new Promise((resolve, reject) => {
                reject("2")
            })
        }, rejected => {
        })

一切都是那么的美好，任何人都不是一帆风顺总会遇到挫折程序也不例外，中途遇到异常怎么办？怎么办？怎么办？我好害怕！！！这个时候catch从天而降，一切又回到原来的状态，不再害怕不再担心

        let promise = new Promise((resolve, reject) => {
            console.log(taowuhua)
        }).then(resolved => {
            return new Promise((resolve, reject) => {
                resolve(1)
            })
        }).catch(rejected => {
            console.log(rejected)
        })

到此链式调用就算说拜拜的时候到了。

then中 return 一个 error 对象并不会抛出错误，所以不会被后续的 catch捕获

        let promise = new Promise((resolve, reject) => {
            resolve("taowuhua")
        }).then(resolved => {
            return new Error("总是抓不住那颗受伤的心...")
        }).catch(rejected => {
            console.log(rejected)
        })

        let promise = new Promise((resolve, reject) => {
            resolve("taowuhua")
        }).then(resolved => {
            return new Error("总是抓不住那颗受伤的心...")
        }).then((resolve) => {
            console.log(resolve)
        }, (reject) => {
            console.log(reject)
        }).catch(rejected => {
            console.log(rejected)
        })

Promise常用Api

Promise.resolve

方法返回一个状态为resolved的promise实例

Promise.resolve('foo');//等价于如下
new Promise((resolve,reject)=>{
    resolve('foo');
})

Promise.reject

方法返回一个状态为rejected的promise实例

Promise.reject('foo');//等价于如下
new Promise((resolve,reject)=>{
    reject('foo');
})

Promise.all

function getStr1() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('1');
        }, 1000);
    });
}
function getStr2() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('2');
        }, 1000);
    });
}
function getStr3() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('3');
        }, 1000);
    });
}
function getStr4() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('4');
        }, 1000);
    });
}
Promise.all([getStr1(), getStr2(), getStr3(), getStr4()]).then((values) => {
    console.log(values);
});

异步代码同步化

异步代码同步化并不是异步代码就变成了同步代码了，而是视觉上像同步代码在运行是的。

async await

建议移步这个链接：https://segmentfault.com/a/1190000007535316
async 用于申明一个 function 是异步的，async 函数返回 Promise为resolved状态的构造函数。而 await 用于等待一个异步方法执行完成

async函数有返回值(类似 `Promise.resolve(x)` )

async function testAsync() {
    return "hello async";
}
const result = testAsync();
console.log(result);

async function testAsync() {
    return "hello async";
}
testAsync().then(v => {
    console.log(v);    // 输出 hello async
});

async函数没有返回值(类似 `Promise.resolve(undefined)` )

async function testAsync() {
}
const result = testAsync();
console.log(result);

await等什么

如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。
如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果

假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作：

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}
function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}
function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

现在用 Promise 方式来实现这三个步骤的处理

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}
doIt();

经历了上面的磨难可以出去社会闯荡一下了，先从下面的两个小demo试试

        Promise.resolve(1)
            .then((res) => {
                return Promise.resolve(4)
            })
            .then(5)
            .then((res) => 2)
            .then(Promise.resolve(3))
            .then(data => {
                console.log(data)
            })

            Promise.resolve(Promise.resolve(3))
                    .then((res) => {
                        return Promise.resolve(4)
                    })
                    .then(5)
                    .then((res) => 2)
                    .then(Promise.resolve(3))
                    .then(data => {
                        console.log(data)
                    })

这里还有一部分面试题感兴趣的同学可以研究下。直通车：https://juejin.im/post/5a04066351882517c416715d

promise