简单易懂的Promise基础教程（小白入门）

潮汐未见潮落

已于 2022-06-20 18:17:30 修改

阅读量5.9k

点赞数 19

分类专栏： ES6 文章标签：前端 javascript 开发语言

于 2022-06-13 17:33:48 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/125187872

版权

ES6 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

本文详细介绍了Promise的基本概念、三种状态（pending、resolved、rejected）及其转换，通过实例演示了如何改变Promise状态以及异步任务对状态的影响。同时，阐述了resolved和rejected状态分别触发.then和.catch方法的机制，并通过测试案例说明了.then和.catch对Promise状态的影响。最后，总结了Promise状态转换的核心要点。

摘要由CSDN通过智能技术生成

前言：

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

由于 Promise 是 es6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。

promise的三种状态

Promise 有三种状态，分别是 pending 、 resolved 、rejected

pending可以转换成另外两种状态

pending -> resolved

pending -> rejected

举一个例子改变 promise 的状态

pending

使用构造函数创建 promise 对象，状态即为 pending ，代码及打印结果如下

// pending
const p1 = new Promise((resolve, reject)=>{

})
console.log('p1',p1)

pending -> resolved

函数中传入 resolve 参数即可把 promise 状态变为 resolved

 // pending -> resolved
const p2 = new Promise((resolve, reject)=>{
        resolve()
})
console.log('p2',p2)

pending -> rejected

这个和上面同理，函数中传入 rejecte 参数即可把 promise 状态变为 rejected

// pending -> rejected
const p3 = new Promise((resolve, reject)=>{
   reject()
})
console.log('p3',p3)

使用构造函数创建 promise 对象，默认条件下就是 pending 状态（不传入 resolve 或 rejecte 参数），传入 resolve 参数即变为 resolved 状态，传入 rejecte 参数当然也是变成 rejected 状态

异步改变状态

使用 setTimeout 执行异步任务

在下面的代码中， resolve（）是异步的，在 1秒钟之后执行，但是 打印语句 是同步的，会立刻执行，所以会出现下面的打印结果

const p2 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    },1000)   
})
console.log('p2',p2)

打印出来的是 pending 状态，但是一秒钟后点开，里面的状态变成了 resolved ，因为打印语句是同步任务会先执行，resolve 是异步任务，在一秒钟之后执行，所以点开后 pending 状态变成了 resolved 状态

如果要改变这种情况（即打印出来的是最终的状态），就要给打印语句也加上 setTimeout ，让打印语句异步执行

const p2 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    },1000)   
})
// console.log('p2',p2)
setTimeout(()=>{
    console.log('p2',p2)
},1000)

刷新页面后等待一秒钟，即可打印最终状态（resolved），注意打印语句的定时器设置的时间要 大于等于 执行 resolve 的时间

不同状态的表现

pending

pending 状态下的 promise ，不会触发 .then 和 .catch 方法

const p1 = new Promise((resolve, reject)=>{

})
console.log('p1',p1)

p1
    .then(()=>{
        console.log('p1 then')
    })
    .catch(()=>{
        console.log('p1 catch')
    })

可以看到 pending 状态下的 promis 浏览器中没有打印任何结果

resolved

resolved 状态下的 promise 只会触发 .then 方法

const p2 = Promise.resolve()
console.log('p2',p2)
p2
    .then(()=>{
        console.log('p2 then')
    })
    .catch(()=>{
        console.log('p2 catch')
    })

rejected

举一反三，这个和上面的类似， rejected 状态下的 promise 只会触发 .catch 方法

const p3 = Promise.reject()
console.log('p3',p3)
    p3
        .then(()=>{
            console.log('p3 then')
        })
        .catch(()=>{
            console.log('p3 catch')
        })

.then 、.catch 对 promise状态的影响

.then

正常状态

.then 正常状态下返回的是一个 resolved 状态的 promise ，在下面代码定义一个 res1 然后打印它，打印也是加了一个异步定时器，因为 .then 方法也是异步的

const p1 = Promise.resolve()
console.log('p1',p1)

const res1 = p1.then(()=>{
   console.log('p1 then');
})
// console.log('res1',res1)
setTimeout(()=>{
    console.log('res1',res1)
})

可以看到 res1 是 resolved 状态的 promise ，即 .then（） 默认返回 resolved 状态的 promise

抛出异常

.then 抛出异常后返回 rejected 状态的 promise ，同样异步打印一下

const p1 = Promise.resolve()
console.log('p1',p1)

const res2 = p1.then(()=>{
    throw new Error('error')
 })
 
 setTimeout(()=>{
     console.log('res2',res2)
 })

可以看到 .then（）抛出异常后返回 rejected 状态的 promise

.catch

正常状态

const p2 = Promise.reject()
console.log('p2',p2)

const res3 = p2.catch(()=>{
       console.log('p2 catch');
    })
setTimeout(()=>{
        console.log('res3',res3)
    })

.catch 正常状态下返回的是一个 resolved 状态的 promise

抛出异常

const p2 = Promise.reject()
console.log('p2',p2)

const res4 = p2.catch(()=>{
    throw new Error('error')
})
setTimeout(()=>{
    console.log('res4',res4)
})

这个和 .then 类似，可以看到 .catch（）抛出异常后返回 rejected 状态的 promise

无论 then  还是 catch  ，如果没有抛出异常

.then 和 .catch  返回的都是一个 resolved 状态的 Promise

如果抛出异常   返回的都是一个 rejected 状态的 Promise

promise小测试

1

const p1 = Promise.resolve()
 p1
    .then(()=>{
        console.log(1)
     })
    .catch(()=>{
         console.log(2)
    })
     .then(()=>{
        console.log(3)
    })
// 打印   1   3

最开始 resolve 触发 then 方法， then 返回 resolved 状态的 promise ，继续触发下面的 then ，所以打印 1 3

2

const p1 = Promise.resolve()
p1
     .then(()=>{
         console.log(1)
         throw new Error()
     })
    .catch(()=>{
         console.log(2)
     })
     .then(()=>{
         console.log(3)
})
// 打印 1 2 3