当前位置: 首页 > article >正文

JS中的Promise对象

基本概念

Promise 是 JavaScript 中用于处理异步操作的对象。它代表一个异步操作的最终完成及其结果值。Promise 提供了一种更优雅的方式来处理异步代码,避免了传统的回调地狱。

Promise 有三种状态

  • Pending(等待中):初始状态,既不是成功,也不是失败;
  • Fulfilled(已成功):操作成功完成;
  • Rejected(已失败):操作失败;

Promise 的状态一旦改变,就不会再变。即从 Pending 变为 Fulfilled 或 Rejected 后,状态就固定了。

创建 Promise

你可以通过 new Promise() 构造函数来创建一个 Promise 对象。构造函数接受一个函数作为参数,这个函数有两个参数:resolve 和 reject,它们都是函数。

1. resolve(value):将 Promise 的状态从 Pending 变为 Fulfilled,并将 value 作为成功的结果;

2. reject(reason):将 Promise 的状态从 Pending 变为 Rejected,并将 reason 作为失败的原因

const myPromise = new Promise((resolve, reject) => {setTimeout(() => {const success = true;if (success) {resolve("操作成功!");} else {reject("操作失败!");}}, 1000);
})

使用 Promise

Promise 对象有两个主要的方法来处理成功和失败的情况:.then() .catch()

  • .then(onFulfilled, onRejected):当 Promise 状态变为 Fulfilled 时,调用 onFulfilled 函数;当状态变为 Rejected 时,调用 onRejected 函数;
  • .catch(onRejected):当 Promise 状态变为 Rejected 时,调用 onRejected 函数;
myPromise.then((result) => {console.log(result); // 输出: 操作成功!}).catch((error) => {console.error(error); // 输出: 操作失败!});

Promise 链式调用

Promise 支持链式调用,即在一个 .then() 中返回一个新的 Promise,然后可以在下一个 .then() 中继续处理

new Promise((resolve, reject) => {setTimeout(() => resolve(1), 1000);
})
.then((result) => {console.log(result); // 输出: 1return result * 2;
})
.then((result) => {console.log(result); // 输出: 2return result * 2;
})
.then((result) => {console.log(result); // 输出: 4
});

async/await

async/await 是 ES2017 引入的语法糖,用于更简洁地处理 Promise。async 函数返回一个 Promise,而 await 用于等待 Promise 的完成

const myPromise = new Promise((resolve, reject) => {// 模拟异步操作setTimeout(() => {const success = true; // 可以切换为 false 来模拟失败if (success) {resolve("操作成功!");} else {reject("操作失败!");}}, 1000);
});async function myAsyncFunction() {try {const result = await myPromise;console.log(result); // 输出: 操作成功!} catch (error) {console.error(error); // 输出: 操作失败!}
}myAsyncFunction();

总结

Promise 是 JavaScript 中处理异步操作的重要工具。它通过 .then().catch() 方法提供了更清晰的代码结构,避免了回调地狱。async/await 进一步简化了 Promise 的使用,使得异步代码看起来更像同步代码。掌握 Promise 的使用对于编写现代 JavaScript 应用程序至关重要。

相关文章:

JS中的Promise对象

基本概念 Promise 是 JavaScript 中用于处理异步操作的对象。它代表一个异步操作的最终完成及其结果值。Promise 提供了一种更优雅的方式来处理异步代码,避免了传统的回调地狱。 Promise 有三种状态 Pending(等待中):初始状态&…...

macOS设置定时播放眼保健操

文章目录 1. ✅方法一:直接基于日历2. 方法二:基于脚本2.1 音乐文件获取(ncm转mp3)2.2 创建播放音乐任务2.3 脚本实现定时播放 1. ✅方法一:直接基于日历 左侧新建一个日历,不然会和其他日历混淆,看起来会有点乱 然后…...

Python 小练习系列 | Vol.14:掌握偏函数 partial,用函数更丝滑!

🧩 Python 小练习系列 | Vol.14:掌握偏函数 partial,用函数更丝滑! 本节的 Python 小练习系列我们将聚焦一个 冷门但高能 的工具 —— functools.partial。它的作用类似于“函数的预设模板”,能帮你写出更加灵活、优雅…...

记录学习的第二十三天

老样子,每日一题开胃。 我一开始还想着暴力解一下试试呢,结果不太行😂 接着两道动态规划。 这道题我本来是想用最长递增子序列来做的,不过实在是太麻烦了,实在做不下去了。 然后看了题解,发现可以倒着数。 …...

Web品质 - 重要的HTML元素

Web品质 - 重要的HTML元素 在构建一个优秀的Web页面时,HTML元素的选择和运用至关重要。这些元素不仅影响页面的结构,还直接关系到页面的可用性、可访问性和SEO表现。本文将深入探讨一些关键的HTML元素,并解释它们在提升Web品质方面的重要性。 1. <html> 根元素 HTM…...

SpringBoot整合sa-token,Redis:解决重启项目丢失登录态问题

SpringBoot整合sa-token&#xff0c;Redis&#xff1a;解决重启项目丢失登录态问题 &#x1f525;1. 痛点直击&#xff1a;为什么登录状态会消失&#xff1f;2.实现方案2.1.导入依赖2.2.新增yml配置文件 3.效果图4.结语 &#x1f600;大家好&#xff01;我是向阳&#x1f31e;&…...

Python 字典和集合(子类化UserDict)

本章内容的大纲如下&#xff1a; 常见的字典方法 如何处理查找不到的键 标准库中 dict 类型的变种set 和 frozenset 类型 散列表的工作原理 散列表带来的潜在影响&#xff08;什么样的数据类型可作为键、不可预知的 顺序&#xff0c;等等&#xff09; 子类化UserDict 就创造自…...

npm fund 命令的作用

运行别人的项目遇到这个问题&#xff1a; npm fund 命令的作用 npm fund 是 npm 提供的命令&#xff0c;用于显示项目依赖中哪些包需要资金支持。这些信息来自包的 package.json 中定义的 funding 字段&#xff0c;目的是帮助开发者了解如何支持开源维护者。 典型场景示例 假…...

ES:账号、索引、ILM

目录 笔记1&#xff1a;账号权限查看、查看账号、创建账号等查看所有用户查看特定用户验证权限修改用户权限删除用户 笔记2&#xff1a;索引状态和内容的查看等查看所有索引查看特定索引内容查看索引映射查看索引设置查看索引统计信息查看ILM策略 笔记1&#xff1a;账号权限查看…...

哈希表(开散列)的实现

目录 引入 开散列的底层实现 哈希表的定义 哈希表的扩容 哈希表的插入 哈希表查找 哈希表的删除 引入 接上一篇&#xff0c;我们使用了闭散列的方法解决了哈希冲突&#xff0c;此篇文章将会使用开散列的方式解决哈希冲突&#xff0c;后面对unordered_set和unordered_map的…...

#在docker中启动mysql之类的容器时,没有挂载的数据...在后期怎么把数据导出外部

如果要导出 Docker 容器内的 整个目录&#xff08;包含所有文件及子目录&#xff09;&#xff0c;可以使用以下几种方法&#xff1a; 方法 1&#xff1a;使用 docker cp 直接复制目录到宿主机 适用场景&#xff1a;容器正在运行或已停止&#xff08;但未删除&#xff09;。 命…...

[蓝桥杯] 挖矿(CC++双语版)

题目链接 P10904 [蓝桥杯 2024 省 C] 挖矿 - 洛谷 题目理解 我们可以将这道题中矿洞的位置理解成为一个坐标轴&#xff0c;以题目样例绘出坐标轴&#xff1a; 样例&#xff1a; 输入的5为矿洞数量&#xff0c;4为可走的步数。第二行输入是5个矿洞的坐标。输出结果为在要求步数…...

Johnson算法 流水线问题 java实现

某印刷厂有 6项加工任务J1&#xff0c;J2&#xff0c;J3&#xff0c;J4&#xff0c;J5&#xff0c;J6&#xff0c;需要在两台机器Mi和M2上完 成。 在机器Mi上各任务所需时间为5,1,8,5,3,4单位; 在机器M2上各任务所需时间为7,2,2,4,7,4单位。 即时间矩阵为&#xff1a; T1 {5, …...

远程监控系统项目里练习

1、项目目标 设备端&#xff1a; &#xff08;1&#xff09;基于stm32mp157开发板&#xff0c;裁剪linux5.10.10&#xff0c;完成ov5640摄像头移植&#xff1b; &#xff08;2&#xff09;完成用户层程序&#xff0c;完成对摄像头的控制及与云端服务的数据交互。 云端&…...

安装并配置Maven

如图所示&#xff0c;解压安装包&#xff0c;配置环境变量&#xff0c;在bin目录那个界面新建文件夹repository&#xff0c;写上安装路径的坐标&#xff0c;修改Maven仓库镜像&#xff0c;输入cmd验证是否安装成功 <mirror><id>alimaven</id><mirrorOf>…...

PlatformIO 自定义脚本选择编译库源文件 - 设置只用于C++ 的编译选项

PlatformIO 只支持以文件夹为单位选择要编译的源文件&#xff0c;不像Keil 或者CMake&#xff0c;可以手动控制每一个源文件。而且默认只会将库的src 文件夹下的源文件全部加入编译。比如&#xff0c;某个库的文件结构如下&#xff1a; libx src include mem| a.c| b.c| c.c…...

dolphinscheduler单机部署链接oracle

部署成功请给小编一个赞或者收藏激励小编 1、安装准备 JDK版本:1.8或者1.8oracle版本&#xff1a;19Coracle驱动版本&#xff1a;8 2、安装jdk 下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/#java8 下载后上传到/tmp目录下。 然后执行下面命…...

MongoDB常见面试题总结(上)

MongoDB 基础 MongoDB 是什么&#xff1f; MongoDB 是一个基于 分布式文件存储 的开源 NoSQL 数据库系统&#xff0c;由 C 编写的。MongoDB 提供了 面向文档 的存储方式&#xff0c;操作起来比较简单和容易&#xff0c;支持“无模式”的数据建模&#xff0c;可以存储比较复杂…...

java基础 迭代Iterable接口以及迭代器Iterator

Itera迭代 Iterable < T>迭代接口(1) Iterator iterator()(2) forEach(Consumer<? super T> action)forEach结合Consumer常见场景forEach使用注意细节 (3)Spliterator spliterator() Iterator< T>迭代器接口如何“接收” Iterator<T>核心方法迭代器的…...

CentOS禁用nouveau驱动

1、验证 nouveau 是否在运行 lsmod | grep nouveau如果命令返回结果&#xff0c;说明 nouveau 驱动正在运行。 2、编辑黑名单文件 通过编辑黑名单配置文件来禁用 nouveau 驱动&#xff0c;这样在系统启动时不会加载它。 vi /etc/modprobe.d/blacklist-nouveau.conf修改以下…...

Linux 时间同步工具 Chrony 简介与使用

一、Chrony 是什么&#xff1f; chrony 是一个开源的网络时间同步工具&#xff0c;主要由两个组件组成&#xff1a; chronyd&#xff1a;后台服务进程&#xff0c;负责与时间服务器交互&#xff0c;同步系统时钟。chronyc&#xff1a;命令行工具&#xff0c;用于手动查看或修…...

C语言:字符串处理函数strstr分析

在 C 语言中&#xff0c;strstr 函数用于查找一个字符串中是否存在另一个字符串。它的主要功能是搜索指定的子字符串&#xff0c;并返回该子字符串在目标字符串中第一次出现的位置的指针。如果没有找到子字符串&#xff0c;则返回 NULL。 详细说明&#xff1a; 头文件&#xf…...

28--当路由器开始“宫斗“:设备控制面安全配置全解

当路由器开始"宫斗"&#xff1a;设备控制面安全配置全解 引言&#xff1a;路由器的"大脑保卫战" 如果把网络世界比作一座繁忙的城市&#xff0c;那么路由器就是路口执勤的交通警察。而控制面&#xff08;Control Plane&#xff09;就是警察的大脑&#xf…...

Vue知识点(5)-- 动画

CSS 动画是 Vue3 中实现组件动画效果的高效方式&#xff0c;主要通过 CSS transitions 和 keyframes 动画 CSS Keyframes&#xff08;关键帧动画&#xff09; 用来创建复杂的动画序列&#xff0c;可以精确控制动画的各个阶段。 核心语法&#xff1a; keyframes animationNa…...

MATLAB2024a超详细图文安装教程(2025最新版保姆级教程)附安装钥

目录 前言 一、MATLAB下载 二、MATLAB安装 二、MATLAB启动 前言 MATLAB&#xff08;Matrix Laboratory&#xff09;是由MathWorks公司开发的一款高性能的编程语言和交互式环境&#xff0c;主要用于数值计算、数据分析和算法开发。内置数学函数和工具箱丰富&#xff0c;开发…...

基于 Spring Boot 瑞吉外卖系统开发(二)

基于 Spring Boot 瑞吉外卖系统开发&#xff08;二&#xff09; 员工登录功能实现 员工登录页面login.html存放在/resources/backend/page/login目录下。 启动项目&#xff0c;在浏览器中通过地址“http://localhost:8080/backend/page/login/login.html”访问员工登录页面。…...

软考系统架构设计师之大数据与人工智能笔记

一、大数据架构设计 1. 核心概念与挑战 大数据特征&#xff1a;体量大&#xff08;Volume&#xff09;、多样性&#xff08;Variety&#xff09;、高速性&#xff08;Velocity&#xff09;、价值密度低&#xff08;Value&#xff09;。传统数据库问题&#xff1a;数据过载、性…...

146. LRU 缓存 带TTL的LRU缓存实现(拓展)

LRU缓存 方法一:手动实现双向链表 哈希表 struct Node{int val;int key;Node* prev;Node* next;Node(int a, int b): key(a), val(b), prev(nullptr), next(nullptr) {}Node():key(0), val(0), prev(nullptr), next(nullptr) {} }; class LRUCache { private:Node* removeTai…...

浅层神经网络:全面解析(扩展)

浅层神经网络&#xff1a;全面解析&#xff08;扩展&#xff09; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 一、神经网络架构演进图谱 #mermaid-svg-…...

Python监控网站更新则推送到企业微信

import requests from lxml import etree import redis r redis.Redis(host"localhost", port6379, db0)def get_page_content(url):# 获取指定网页中的标题和链接url_lists []headers {"user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)…...