ES2015之Promises

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

Promises

ES2015的标准增加了：Promises即一个异步操作的最终完成 (或失败)及其结果值，这篇文章我们就来了解一下什么是Promises。

创建一个 Promise 对象可以把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来，它有三种状态：

• 待定（pending） : 初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled） : 意味着操作成功完成。
• 已拒绝（rejected） : 意味着操作失败。

如何使用

创建 Promise 对象

Promise 对象是由关键字 new 及其构造函数来创建的。其构造函数有两个参数：resolve 和 reject，当异步任务顺利完成且返回结果值时，会调用 resolve 函数；而当异步任务失败且返回失败原因（通常是一个错误对象）时，会调用reject 函数。

const promise=new Promise((reslove,reject)=>{
    if(Math.random()<0.5){
        reslove('成功')
    }else{
        reject('失败')
    }
})
复制代码

上述代码我们以Math.random()的值来模拟请求的成功或失败，即fulfilled状态或rejected状态。我们根据相应的状态去做相应的操作，成功或失败函数可以传相应的参数。

链式操作

我们可以用 promise.then()，promise.catch() 和 promise.finally() 这些方法来进行链式操作与 Promise 的状态关联起来，使用如下：

promise.then((res)=>{
    console.log('也笑x1',res);
}).then(()=>{
    console.log('也笑x2');
}).catch((res)=>{
    console.log('也笑x3',res);
}).then(()=>{
    console.log('也笑x4');
}).finally(()=>{
    console.log('也笑x5');
})
复制代码

 .then()是上一步fulfilled状态的时候调用，.catch()是上一步rejected状态的时候调用，.finally()是所有链式操作的调用。因此，我们可以知道：

promise状态为fulfilled的时候，输出如下：

也笑x1 成功
也笑x2
也笑x4
也笑x5
复制代码

promise状态为rejected的时候，输出如下：

也笑x3 失败
也笑x4
也笑x5
复制代码

注意事项

我们还需要注意的是：在链式操作中，我们还可以继续return一个Promise对象，如下：

const promise=new Promise((reslove,reject)=>{
    reslove('成功')
})

promise.then((res)=>{
    console.log('也笑x1',res);
    return new Promise((reslove,reject)=>{
        reject('then操作后的失败')
    })
}).then(()=>{
    console.log('也笑x2');
}).catch((res)=>{
    console.log('也笑x3',res);
}).then(()=>{
    console.log('也笑x4');
}).finally(()=>{
    console.log('也笑x5');
})
复制代码

输出结果如下：

也笑x1 成功
也笑x3 then操作后的失败
也笑x4
也笑x5
复制代码

Promise在我们项目中是经常用到的，所以你应该好好的去了解它。

总结

Promise主要是用来解决回调地狱的，也就是我们一层一层嵌套的臃肿代码，但是它本质功能还是和回调功能一样的。这篇文章没有深入的去举例子，可以满足你项目中遇到的大部分需求。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。