前言:
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
因为最开始 抛出异常后返回 rejected 的 promise 触发 catch,catch 没有触发异常 返回 resolved ,再次触发 then ,所有这里 打印 1 2 3
总结:
1.Promise 有三种状态 ,分别是 pending 、 resolved 、rejected ,pending可以转换成另外两种状态。
2.resolved 状态下的 promise 只会触发 .then 方法,, rejected 状态 下的 promise 只会触发 .catch 方法。
3.无论 then 还是 catch ,如果没有抛出异常
.then 和 .catch 返回的都是一个 resolved 状态的 Promise
如果抛出异常 返回的都是一个 rejected 状态的 Promise
本文是基于 promise 的入门小白基础知识 ,后面还会更新进阶的 promise
文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会一一回复
文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力 长路漫漫,道阻且长
转载请注明出处:https://blog.csdn.net/qq_52855464/article/details/125187872?spm=1001.2014.3001.5501