这一次,彻底搞懂Promise的状态转换

简介: 这一次,彻底搞懂Promise的状态转换

这篇文章解决了我很久的困惑,也希望能够解决看到的小伙伴的困惑,谢谢。

Promise的三种状态到底是什么?

  1. pending
  2. fulfilled
  3. rejected

下面我们先看下三种状态的产生

1.pending状态的Promise

const promise1 = new Promise((resolve,reject) => {
})
console.log(promise1);

image.png

2. fulfilled状态的Promise

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    })
})
console.log(promise1);


image.png

3. rejected状态的Promise

const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject();
        })
    });
    console.log(promise);


从pending状态到fulfilled状态的变化过程

  • resolve()后状态从pending变为了fulfilled
const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('resolve前Promise的状态:',promise);
            resolve();
            console.log('resolve后Promise的状态:',promise);
        })
    });


image.png

从pending状态到rejected状态的变化过程

  • reject()后状态从pending变为了rejected
const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Promise的状态:reject前:",promise);
            reject();
            console.log("Promise的状态:reject后:",promise);
        })
    });


image.png

下面介绍下关于Promise状态的可能的疑问

疑问1:resolved状态和fulfilled状态是一回事吗?

答:并不是一回事,resoved状态指的是完成了,不会再改变的状态,只是一种叫法,并不是真正的状态,真正的状态还是前文提到的那三种,pending、fulfilled、rejected这三种,所以resolved状态可能是fulfilled也可能是rejected。

疑问2:Chrome浏览器显示的状态时pending,点开却是fulfilled,到底哪

image.png

参考文献

Promise中的resolved和fulfilled到底什么关系,又或者这只是叫法的问题?

Promise的状态和现象【JS面试题】

相关文章
|
前端开发 Go
15 # promise 延迟对象的作用
15 # promise 延迟对象的作用
72 0
|
2月前
|
前端开发 Java API
vertx学习总结5之回调函数及其限制,如网关/边缘服务示例所示未来和承诺——链接异步操作的简单模型响应式扩展——一个更强大的模型,特别适合组合异步事件流Kotlin协程
本文是Vert.x学习系列的第五部分,讨论了回调函数的限制、Future和Promise在异步操作中的应用、响应式扩展以及Kotlin协程,并通过示例代码展示了如何在Vert.x中使用这些异步编程模式。
54 5
vertx学习总结5之回调函数及其限制,如网关/边缘服务示例所示未来和承诺——链接异步操作的简单模型响应式扩展——一个更强大的模型,特别适合组合异步事件流Kotlin协程
|
3月前
|
存储 前端开发 JavaScript
node中循环异步的问题[‘解决方案‘]_源于map循环和for循环对异步事件配合async、await的支持
本文探讨了在Node.js中处理循环异步操作的问题,比较了使用map和for循环结合async/await处理异步事件的差异,并提供了解决方案。
45 0
对于async和await的使用方式、作用效果不怎么理解 ?没关系,初步看这篇就够了
对于async和await的使用方式、作用效果不怎么理解 ?没关系,初步看这篇就够了
|
前端开发 JavaScript
【JavaScript】Promise(零) —— 准备工作(实例对象、函数对象、回调函数分类、捕获抛出错误)
【JavaScript】Promise(零) —— 准备工作(实例对象、函数对象、回调函数分类、捕获抛出错误)
|
前端开发
前端学习案例4-promise封装详解4 原
前端学习案例4-promise封装详解4 原
76 0
前端学习案例4-promise封装详解4 原
|
前端开发
前端学习案例3-promise的理解方式和调用机制2
前端学习案例3-promise的理解方式和调用机制2
61 0
前端学习案例3-promise的理解方式和调用机制2
|
前端开发
前端学习案例2-promise的理解方式和调用机制1
前端学习案例2-promise的理解方式和调用机制1
53 0
前端学习案例2-promise的理解方式和调用机制1
|
前端开发
前端学习案例16-promise的理解方式&调用机制3
前端学习案例16-promise的理解方式&调用机制3
73 0
前端学习案例16-promise的理解方式&调用机制3
|
前端开发
前端学习案例15-promise的理解方式&调用机制2
前端学习案例15-promise的理解方式&调用机制2
85 0
前端学习案例15-promise的理解方式&调用机制2

热门文章

最新文章