首页 > 其他分享 >promise有哪几种状态?是如何变化的?

promise有哪几种状态?是如何变化的?

时间:2024-12-14 09:23:37浏览次数:9  
标签:异步 状态 rejected fulfilled promise Promise 操作 哪几种

在前端开发中,Promise 有三种状态:

  • pending (等待): Promise 初始化时的状态。既没有被 fulfilled (成功),也没有被 rejected (失败)。 在这个状态下,Promise 的 then 方法和 catch 方法都不会被执行。

  • fulfilled (已完成): Promise 的异步操作成功完成后的状态。这时,then 方法中的回调函数会被执行,并将异步操作的结果作为参数传递给回调函数。

  • rejected (已拒绝): Promise 的异步操作失败后的状态。这时,catch 方法中的回调函数会被执行,并将异步操作的错误原因作为参数传递给回调函数。

状态变化:

Promise 的状态只能从 pending 变为 fulfilled 或 rejected,一旦状态变为 fulfilled 或 rejected,就永远不会再改变。 这保证了 Promise 的结果的确定性和一致性。 这被称为状态机。 状态转换图如下:

pending  ---------> fulfilled
       |
       ---------> rejected

状态变化的触发:

  • resolve() 方法: 当异步操作成功完成时,调用 resolve() 方法,将 Promise 的状态变为 fulfilled,并将结果作为参数传递给 then 方法的回调函数。

  • reject() 方法: 当异步操作失败时,调用 reject() 方法,将 Promise 的状态变为 rejected,并将错误原因作为参数传递给 catch 方法的回调函数。

示例 (JavaScript):

const myPromise = new Promise((resolve, reject) => {
  // 模拟一个异步操作
  setTimeout(() => {
    const success = Math.random() < 0.5; // 50% 的概率成功
    if (success) {
      resolve("操作成功!"); // 状态变为 fulfilled
    } else {
      reject("操作失败!"); // 状态变为 rejected
    }
  }, 1000);
});

myPromise
  .then(result => {
    console.log(result); // 输出 "操作成功!" 或抛出错误
  })
  .catch(error => {
    console.error(error); // 输出 "操作失败!"
  });

在这个例子中,setTimeout 模拟了一个异步操作。 1 秒后,随机决定是调用 resolve() 还是 reject(),从而改变 Promise 的状态。 then 方法处理成功的情况,catch 方法处理失败的情况。 Promise 的状态变化是单向的,不可逆的。

总而言之,理解 Promise 的三种状态及其单向转换是掌握 Promise 的关键。 这使得你可以编写更清晰、更易于维护的异步 JavaScript 代码。

标签:异步,状态,rejected,fulfilled,promise,Promise,操作,哪几种
From: https://www.cnblogs.com/ai888/p/18606329

相关文章

  • 强跟踪UKF算法,三维非线性状态量和观测量,提供MATLAB代码下载
    本文介绍普通UKF与强跟踪无迹卡尔曼滤波(StrongTrackingUnscentedKalmanFilter,ST-UKF)算法的MATLAB代码示例。该示例涉及三维非线性状态量和观测量。文章目录主要功能主要步骤运行结果MATLAB代码示例备注这段代码实现了强跟踪无迹卡尔曼滤波(StrongTrackin......
  • 解题报告-论对“动态规划状态表示”的新理解
    解题报告-论对“动态规划状态表示”的新理解我们说动态规划状态表示的时候,一般认为它就是一句话,就表示完了,剩下的全部交给\(dp\)式子,推不出来再换一个状态表示。但是有些情况下,我们的状态表示是正确的,只是细节太多,在状态里写不完罢了。看了这道题,发现题解里面都是状态表示漏了......
  • Android 设置沉浸式状态栏
    原文地址:Android设置沉浸式状态栏-Stars-One的杂货小窝标题所说的沉浸式状态栏实际就是底部有背景图,而状态栏是沉浸效果(可以在背景图上面展示的),如下面的这种效果:官方API实现官方新版本出了个api,名为enableEdgeToEdge(),方便我们使用这种方法主要适用Activity的整......
  • 公司网站错误怎么修改回来,恢复网站正常状态
    当公司网站出现错误时,需要及时修复以确保网站正常运行。以下是详细的步骤:备份当前文件:在进行任何更改之前,备份当前的网站文件和数据库,以防出现问题。查看错误日志:登录到服务器,查看网站的错误日志文件(如error.log),以确定错误的原因。检查最近的更改:回顾最近对网站所做的更......
  • 嵌入式组件-----状态机
    此篇文章在2023年7月10日被记录1、简述状态机在C语言编程中,可以使用状态机来实现复杂的控制流程和状态管理。状态机通常由以下几个组成部分构成:状态(State):系统或程序可能处于的不同状态,例如"待机"、"运行"、"暂停"等。每个状态代表了系统或程序的一种行为或模式。事件(Event......
  • Uncaught (in promise) Error: Could not establish connection. Receiving end does
    1.问题描述在html调用indexUser.nickname的属性时,没重新启动项目直接查阅该index.html,出现了页面加载出来的一片空白的情况,去掉{{indexUser.nickname}}页面就正常2.问题分析这种情况是访问不到值(未定义或为空)3.解决方案写了一小段检查是否为未定义或者空的代码,随......
  • 网络通信与状态管理:深入理解Cookie、Session及Web工具
    前言:在当今数字化的网络世界中,Web技术的基石构建起了我们丰富多彩的互联网体验。其中,Cookie和Session犹如隐匿于幕后的关键使者,默默地在客户端与服务器之间传递着信息,管理着用户的状态与交互数据,深刻影响着我们在各类网站与应用中的每一次操作与交互流程。与此同时,Links、Wge......
  • 【Vue】Pinia状态管理库
    Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。1、安装npminstallpinia2、使用Pinia在main.js中,引入pinia,创建pinia实例,并调用vue应用实例的use方法使用piniaimport{createPinia}from'pinia'constpinia=createPinia()app.use(pinia)3、......
  • 鸿蒙Next状态变量Watch使用方法总结
    一、@Watch装饰器概述@Watch装饰器用于监听状态变量的变化,当被装饰的状态变量发生改变时,会触发对应的回调函数执行。其在ArkUI框架内部基于严格相等(===)来判断数值是否更新,仅当严格相等判断为false时,才会触发回调。这为开发者提供了一种有效的方式来响应状态变量的变化,从而实现应......
  • 鸿蒙应用开发:开机自启并自检网络状态
    公司要开发一个小玩意,主要用途就是监测远端软件包与本地安装包是否一致,如果不是则下载更新本地应用,并且要求开机会自检。现在来跟各位看官老爷们分享一下其中的一些关键,希望各位不吝指教!开机自启关于如何设置开机自启这篇文章已经讲的很详细了,请移步:OpenHarmony应用开机自启......