9000字教你弄懂Promise对象（详细、新手入门级）——涵盖方法then、catch、resolve、reject、all、race、finally

1. 为什么Promise会出现

Promise 是异步编程的一种解决方案，主要用来消除回调地狱。

对于这一句话，首先我们要了解两个概念。

什么是异步编程呢？js中的异步主要是通过回调函数实现的，比如开启定时器、点击事件、资源加载呀。此外，前端中存在的异步回调还有ajax请求、操作数据库等。如下是js中的执行机制。

什么是回调地狱呢？下面我们通过一个例子来进行说明。比如我们要做一道菜，包括如下四个流程买菜->洗菜->切菜->炒菜，且要求每个步骤之家要间隔两秒。那通过定时器我们会这样实现

console.log('开始');
setTimeout(()=>{
   console.log('买菜');
   setTimeout(()=>{
       console.log('洗菜');
       setTimeout(()=>{
           console.log('切菜');
           setTimeout(()=>{
               console.log('炒菜');
               console.log('结束');
           },2000)
       },2000)
   },2000)
},2000)

其执行结果如下，和我们预期的一样，但是上面的代码存在什么问题呢？

代码不是纵向发展，而是横向发展，很快就会乱成一团 ，无法管理。因为多个异步操作形成了强耦合，只要有一个操作需要修改，它的上层回调函数和下层回调函数就都要跟着修改。这种情况就称为“回调函数地狱”

而Promise的出现，就是为了解决这个问题。

2. Promise 状态

Promise 对象是 个构造函数，用来生成 Promise 实例

既然是构造函数，那么就需要通过new 关键字来创造实例对象。但是在介绍其基本用法之前，首先要了解Promise实例的三个状态

• Pending（进行中）
• Fulfilled（已成功）
• Rejected（已失败）

创建时候的默认状态是Pending，只有异步操作的结果可以决定当前是哪一种状态。任何其他操作都没有办法改变这个状态，这也是我们为什么称其为Promise（承诺）的原因。

Promise对象的状态改变只有两种可能：

Pending --> Fulfilled
Pending -->Rejected

这里需要注意，一旦状态改变就不会再变，一直保持这个结果。也就是说如果你已经变成了 Fulfilled就不可能再变为Rejected了，反过来也是一样的。

3. Promise 使用

上一点中，我们说到 Promise 对象是 个构造函数，用来生成 Promise 实例。其基本代码如下

const p = new Promise((resolve,reject)=>{
     if(异步操作成功)  resolve(value);
     else reject(error);
 })

对于上面的函数，我们需要注意

Promise构造函数接受一个函数作为参数。该函数的参数是两个函数，分别是resolve和reject。

什么时候调用resolve函数呢？当异步操作成功时调用，并将异步操作的结果作为参数传递出去。（Pending --> Fulfilled）

同理，在异步操作失败时我们需要调用reject函数，将异步操作报出的错误作为参数传递出去 （Pending -->Rejected）

---

在promise实例生成后，我们可以调用then方法分别指定resolved状态和rejected状态的回调函数。

什么意思呢？ Promise 实例的状态变为 Resolved（或Rejected） 就会触发 then 方法绑定的回调函数。也就是当我们状态发生变化时，then方法里面的逻辑会指定下一步需要做什么。

p.then((value)=>{
     //成功
 },(error)=>{
     //失败
 })

从上面的代码中我们可以看出，then方法可以接受两个回调函数作为参数。

• 第一个回调函数是状态从Pending --> Fulfilled时调用的
• 第二个回调函数是状态从Pending -->Rejected时调用的

注意：第二个函数是可选的，不一定要提供。

现在我们通过一个实例进行说明，首先我们定义了一个函数cook，然后在下面调用了该函数，传递参数为'你好啊'，在函数内部我们返回了一个Promise对象，该对象在两秒钟后调用resolve函数，那么它的状态就从Pending变成了Fulfilled，then方法里面的第一个函数会被调用，控制台输出你好啊

function cook(stage) {
     return new Promise((resolve)=>{
         setTimeout(()=>{
             resolve(stage) //状态发生变化
         },2000)
     })
 }

 cook('你好啊').then(value=>{
     console.log(value);
 })

接着，我们来验证这句话：状态改变就不会再变，一直保持这个结果

const p = new Promise((resolve,reject)=>{
         setTimeout(()=>{
             resolve('我成功了') //状态发生变化
             reject('我失败了')
         },2000)
     })
 
 p.then((value)=>{
     console.log(value);
 },(error)=>{
     console.log(error);
 })

请思考以下，这段代码最终会输出什么，再看下面的结果。

控制台输出为我成功了，就证明当其调用resolve('我成功了')后状态发生了改变，变成了Fulfilled。之后不管调用多少次reject('我失败了')，其状态都不会改变。

---

再来分析一段代码，请问其输出的顺序是什么呢？

const p = new Promise((resolve)=>{
         console.log('1-Promise');
         resolve('2-resolve') //状态发生变化
     })
 
 p.then((value)=>{
     console.log(value);
 })

 console.log('3-end');

正确的结果是：

为什么呢？

因为Promise 新建后就会立即执行，所以先输出的是1-Promise。然后，then方法指定的回调函数将在当前脚本所有同步任务执行完成后才会执行，所以2-resolve最后输出

4. Promise.prototype.then()

Promise实例之所以具有then方法，是因为then方法是定义在原型对象Promise.prototype上的。

then方法的使用在上一点中已经了解了，这一节中我们主要关注的是：then方法返回的是一个新的Promise实例（不是原来哪个Promise实例！！是一个新的）

这就意味着我们可以采用链式写法，在then方法后面再调用另一个then方法

const p = new Promise((resolve,reject)=>{
         setTimeout(()=>{
             resolve('我成功了') //状态发生变化
         },2000)
     })
 
 p
 .then((value)=>{
     console.log(value+'1!!');
     return 2;
 },(error)=>{
     console.log(error);
 })
 .then((value)=>{
     console.log(value+'2!!');
 },(error)=>{
     console.log(error);
 })

控制台输出如下，我们来分析一下过程。

在第一行代码中我们创建了一个Promise实例对象，在内部2秒钟后调用resolve('我成功了')，状态变为Fulfilled。其then方法中的回调函数被调用，输出了我成功了1!!。 之后其返回2（表明新的Promsise实例状态是成功的），该返回结果作为参数传递给下一个then回调函数，所以其输出的是22!!

采用链式的then，可以指定一组按照指定次序调用的回调函数。因为后一个回调函数会等待上一个Promise实例对象的状态发生变化再被调用。

所以，最开始的回调地狱的例子可以改写为如下这种形式

function cook(stage) {
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve(stage) //状态发生变化
        },2000)
    })
}

console.log('开始');
cook('买菜')
.then(v1=>{
    console.log(v1);
    return cook('洗菜');
})
.then(v1=>{
    console.log(v1);
    return cook('切菜');
})
.then(v1=>{
    console.log(v1);
    return cook('炒菜');
    
})
.then(v1=>{
    console.log(v1);
    console.log('结束');
})

5. Promise.prototype.catch()

Promise prototype catch 方法是 then(null, rejection ）的别名，用于指定发生错误时的回调函数。

举个例子，下面的代码会输出两次出错啦。因为then方法的第二个回调函数和catch的回调函数都能捕获Promise状态变为失败。

const p = new Promise((resolve,reject)=>{
         setTimeout(()=>{
             reject('出错啦')
         },2000)
     })
 // then的第二个回调
 p.then(null,error=>{
     console.log(error);
 })
 // 等价于catch方法
 
 p.catch(error=>{
     console.log(error);
 })

换句话说，如果上面的代码调用的是resolve('我成功啦')则只会输出一次我成功啦

6. Promise.resolve()

Promise.resolve 方法可以将现有对象转为 Promise 对象

现在，观察一下这段代码。如果两者是等价的，那就意味着Promise.resolve('我成功了')返回的是一个状态变为成功的promise实例对象。

Promise.resolve('我成功了').then(value=>{
     console.log(value);
 })

// 等价于
 new Promise(resolve=>{
     resolve('我成功了')
 }).then(value=>{
     console.log('我成功了');
 })

事实证明是正确的。

接下来我们分析，在不同参数的情况下，Promise.resolve()的返回值究竟是什么

• 如果参数不是具有 then 方法的对象或根本不是对象。那么 Promise resolve
  方法返回一个新的 Promise 对象，状态为 Resolved。就比如上一段代码中的我成功了，由于字符串不属于异步操作（判断方法是字符串对象不具有 then方法），所以其返回 Promise 实例的状态从生成起就是 Resolved。

• Promise resolve 方法允许在调用时不带有参数 ，而直接返回 Resolved 状态的Promise 对象。也就是说下面这段代码也会输出hello。

Promise.resolve().then(value=>{
     console.log('hello');
 })

• 如果参数是 Promise 实例 ，那 Promise.resolve 将不做任何修改，原封不动地返回这个实例

p= new Promise(resolve=>{

})

console.log(Promise.resolve(p));

• 如果参数是一个 thenable 对象（thenable 对象指的是具有 then 方法的对象），则Promise .resolve 方法会将这个对象转为 Promise 对象，然后立即执行 thenable 对象的then 方法。

let t ={
     then:function(resolve,reject){
         resolve(520)
     }
 }
 
 let p = Promise.resolve(t)

 t.then(value=>{
     console.log(value);
 })

也就是说，上面的代码中， t在被转化为Promise对象后，会执行其中的then方法中的resolve(520)，然后Promise实例对象就变成了resolved，从而立即执行最后的 t.then 方法指定的回调函数，输出 520。

7. Promise.reject()

Promise.reject( reason ）方法也会返回个一个新的 Promise 实例，状态为 Rejected

注意：Promise.reject ()方法的参数会原封不动地作为 reject 的理由变成后续方法的参数，这一点与 Promise.resolve 方法不一致！！！

8. Promise.all()

Promise all 方法用于将多个 Promis 实例包装成 个新的 Promise 实例。

Promise all 方法接受一个数组作为参数（一个参数也需要写成数组的形式，否则会报错）。

下面代码中p1,p2,p3都是Promise实例对象。若不是，则会调用Promise.resolve方法，将参数转为Promise实例

const p = Promise.all([p1,p2,p3])

p的状态怎么决定呢？

• 只有 p1、 p2 、p3的状态都变成 Fulfilled 的状态，p才会变成 Fulfilled 。此时p1、 p2、p3 的返回值组成一个数组，传递给p的回调函数。

• 只要 p1、 p2 、p3 中有一个被 Rejected，p 的状态就变成 Rejected 。此时第一个被 Rejected的实例的返回值会传递给p的回调函数。

function fn(data) {
     return new Promise((resolve,reject)=>{
         setTimeout(()=>{
             resolve(data) //状态发生变化
         },2000)
     })
 }
 const p1 = fn('i')
 const p2 = fn('love')
 const p3 = fn('money')

 const p = Promise.all([p1,p2,p3])

 p.then(value=>{
     console.log(value);
 },error=>{
     console.log(error);
 })

分析上面这段代码：p1、p2、p3依次调用fn函数得到一个状态变为Fulfilled的Promise实例对象，所以p的状态变为Fulfilled。p.then方法中第一个回调会被调用，输出其参数为一个数组

若fn函数中执行的是resolve(data) ，则p1最先变成状态为rejected的Promise实例对象。那么p的状态就变成了rejected，调用then方法里面的第二个函数。输出i

9. Promise.race()

Promise.race 方法同样是将多个 Promise 实例包装成一个新的 Promise 实例。

race有竞争，比赛的意思，所以代码中只要 p1 p2, p3 中有一个实例率先改变状态， p的状态就跟着改变。那个率先改变的 Promise 实例的返回值就传递给p的回调函数。

var p = Promise.race([pl , p2 , p3]) ;

注意：Promise.race 方法的参数与 Promise.all 方法一样，如果不是 Promise 实例，就会先调用 Promise.resolve 方法，将参数转为 Promise实例 ，再进一步处理。

function fn(data) {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(data) //状态发生变化
        },2000)
    })
}

const p = Promise.race(['love','i' , 'you']) ;

p.then(value=>{
    console.log(value);
},error=>{
    console.log(error);
})

首先'love','i' , 'you'字符串依次被转化为状态是Fulfilled的Promise实例对象，但p的状态是跟着最早变化的love变化的，所以其状态变为Fulfilled。then方法里面的第一个函数被调用，输出love

10. finally()

finally 方法用于指定不管 Promise 象最后状态如何都会执行的操作。它接受 个普通的回调函数作为参数，该函数不管怎样都必须执行。

const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('我成功啦')
            },2000)
        })
    // then的第二个回调
p.then(value=>{
    console.log(value);
},error=>{
    console.log(error);
})

.finally(()=>{
    console.log('不管怎么样我都会执行的哦~');
})