前端面试：你了解Promise吗？

Promise用于处理一些需要花费长时间的任务，进行异步处理，防止任务阻塞。一般是说解决了回调地狱的问题。

那什么是回调地狱？

用吃来做比喻：

1. 我想吃火锅

functiongetTea(fn){setTimeout(()=>{fn('火锅')},1000)}getTea(function(data){
    console.log(data);})

1s后输出：火锅。

（回调函数获取异步数据，所以这里用的是fn，而不是直接return结果。）

1. 为了解辣我还想喝奶茶

functiongetHotPot(fn){setTimeout(()=>{fn('火锅')},1000)}functiongetTea(fn){setTimeout(()=>{fn('奶茶')},500)}getHotPot(function(data){
    console.log(data);})getTea(function(data){
    console.log(data);})

先输出“奶茶”，再输出“火锅”。

1. 但是这并不是我想要的结果，我要的是先吃火锅再喝奶茶，那为了控制事件的发生顺序，就嵌套：

functiongetHotPot(fn){setTimeout(()=>{fn('火锅')},1000)}functiongetTea(fn){setTimeout(()=>{fn('奶茶')},500)}getHotPot(function(data){
    console.log(data);getTea(function(data){
    console.log(data);})})

这样就是先输出火锅，再输出奶茶了。

如果吃完火锅还想做个美甲，还想做按摩，还想看电影，那就继续嵌套：

getHotPot(function(data){//吃火锅
    console.log(data);getTea(function(data){//吃奶茶
        console.log(data);getNailArt(function(data){//美甲
            console.log(data);getMassage(function(data){//按摩
                console.log(data);getMovie(function(data){//看电影
                    console.log(data);})})})})})

为了控制顺序获得结果，并且这个结果是异步操作，那就不能直接return，用回调函数获取，还需要嵌套，嵌套多了就形成了回调地狱，代码不易维护。

Promise的用法

Promise 是异步编程的一种解决方案，其实就是一个构造函数，自己身上有

all

、

resolve

、

reject

这几个方法，原型上有

.then

、

.catch

等方法。

promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)。

functiongetHotPot(){returnnewPromise(function(resolve){setTimeout(()=>{resolve('火锅')},1000)})}functiongetTea(){returnnewPromise(function(resolve){setTimeout(()=>{resolve('奶茶')},800)})}// 先吃火锅，再喝奶茶getHotPot().then(function(data){
    console.log(data);returngetTea();}).then(function(data){
    console.log(data);returngetNailArt();}).then(function(data){
    console.log(data);returngetMassage();}).then(function(data){
    console.log(data);returngetMovie();}).then(function(data){
    console.log(data);

这时如果我们使用Promise去实现这个效果，这样一级一级下去实现了链式调用，虽然代码量增加了，但比起前面的层层嵌套，显然这种方式使得代码更易读更易维护。

也可以使用async await 来写：

asyncfunctiongetAll(){// 直接获取resolve传递出来的异步数据let hotpot =awaitgetHotPot()
    console.log(hotpot);let tea =awaitgetHotPot()
    console.log(tea);}

依然是先输出火锅，再输出奶茶。

再看看reject和.catch的用法

还是吃火锅和喝奶茶的先后问题，如果先吃到了火锅，再喝的奶茶，就是一个满意的结果，否则就是不满意的结果，但是最后无论是先吃到了火锅还是奶茶，也无关紧要，都吃到了想吃的：

const isSatisfied =true;const promise =newPromise((resolve, reject)=>{if(isSatisfied){resolve('先吃到了火锅')}else{reject('奶茶比较快，先喝到了奶茶')}})

promise
    .then(name=>{
        console.log(`满意的结果：${name}`);}).catch(name=>{
        console.log(`不是满意的结果：${name}`);}).finally(()=>{
        console.log(`最后！其实每个结果我都可以接受～`);})

输出：
满意的结果：先吃到了火锅
最后！其实每个结果我都可以接受～

如果把

isSatisfied

改为

false

，输出的结果就是：
不是满意的结果：奶茶比较快，先喝到了奶茶
最后！其实每个结果我都可以接受～

promise在自己的框架中，封装了一系列的内置的方法。

捕获错误的方法

catch()

解析全部方法

all()

— 谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象
竞赛

race()

— 谁跑的快，以谁为准执行回调
生成一个成功的promise

resolve()

生成一个失败的promise

reject()

总结

promise解决以下问题：

回调地狱，代码难以维护， 第一个的函数的输出是第二个函数的输入；
promise可以支持多个并发的请求，获取并发请求中的数据；
promise可以解决异步的问题，但是不能说promise是异步的。