【Javascript】Promise形象比喻

我们可以把 Promise 形象地比喻为一个“外卖订单”,它有三种状态:下单中、已送达、已取消。这个比喻可以帮助你理解 Promise 的工作机制。

比喻解释

Pending(下单中):

当你在外卖平台上创建一个订单时,订单状态是“下单中”。此时,外卖还没有送达,也没有取消,你在等待外卖的处理结果。
对应于 Promise,刚创建时的状态就是 Pending

Fulfilled(已送达):

当外卖小哥把你的餐送到并交给你时,订单状态变为“已送达”。你得到了你期望的结果,可以开始享用美食。
对应于 Promise,被 resolve 时的状态是 Fulfilled,这时你可以在 .then 方法中处理结果。

Rejected(已取消):

如果外卖因为某些原因(例如餐厅关闭或配送问题)被取消了,订单状态变为“已取消”。你没有得到你期望的餐,并可能需要处理退款或其他问题。
对应于 Promise,被 reject 时的状态是 Rejected,这时你可以在 .catch 方法中处理错误。

示例解释

// 创建一个外卖订单(Promise)
const orderFood = new Promise((resolve, reject) => {// 模拟外卖处理过程setTimeout(() => {const isDelivered = Math.random() > 0.5; // 50% 概率送达,50% 概率取消if (isDelivered) {resolve('外卖已送达'); // 订单成功} else {reject('外卖已取消'); // 订单失败}}, 2000); // 模拟 2 秒的送餐时间
});// 处理订单结果
orderFood.then(message => {console.log(message); // 外卖已送达}).catch(error => {console.error(error); // 外卖已取消});

在这个示例中:

当你创建 orderFood 这个 Promise 对象时,订单状态是“下单中”(Pending)。
经过 2 秒的模拟送餐时间,订单状态会变成“已送达”(Fulfilled)或者“已取消”(Rejected),并分别调用相应的回调函数处理结果。

链式调用的比喻

你可以想象链式调用 .then 和 .catch 像是处理外卖订单过程中的一系列步骤。例如,确认送达后可以继续处理支付和评价步骤:

orderFood.then(message => {console.log(message); // 外卖已送达return '确认支付';}).then(paymentMessage => {console.log(paymentMessage); // 确认支付return '给好评';}).then(reviewMessage => {console.log(reviewMessage); // 给好评}).catch(error => {console.error('处理失败:', error); // 处理失败,例如外卖已取消});

在这个扩展的比喻中,每个 .then 都是订单流程中的一个步骤,只有前一步成功完成,下一步才会继续进行。如果某一步失败(例如外卖被取消),错误处理(.catch)就会被触发,处理相应的错误情况。


项目中的运用

其实是最近在写一个后台管理项目,我喜欢用.then.catch

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router'
import { ElNotification } from "element-plus";
//引入用户相关的小仓库
import useUserStore from "@/store/modules/user";
let useStore = useUserStore()//定义变量控制按钮加载效果
let loading = ref(false)
//获取路由器
let $router = useRouter()
//收集账号与密码的数据
let loginForm = reactive({ username: '', password: '' })//登录按钮回调
const login = () => {//按钮加载效果loading.value = true//通知仓库发登录请求//请求成功->首页展示数据的地方//请求失败->弹出登录失败的信息useStore.useLogin(loginForm).then(() => {//编程式跳转到数据首页$router.push('/')//登录成功提示信息ElNotification({type: 'success',message: '登录成功'})//登录成功加载效果消失loading.value = false}).catch((error) => {//登录失败加载效果消失loading.value = falseElNotification({type: 'error', message: error.message})})
}
</script>

当然,用try...catch可能是一个更好的选择

// 登录按钮回调
const login = async () => {// 按钮加载效果loading.value = true;try {// 通知仓库发登录请求await useStore.useLogin(loginForm);// 编程式跳转到数据首页$router.push('/');// 登录成功提示信息ElNotification({type: 'success',message: '登录成功'});} catch (err) {// 使用类型断言确保 err 是 Error 类型const error = err as Error;// 登录失败提示信息ElNotification({type: 'error',message: error.message || '登录失败'});} finally {// 登录成功或失败加载效果消失loading.value = false;}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/843190.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c 函数指针的表现形式

1.概要 int&#xff08;*函数指针变量&#xff09;(int a,char b)&#xff0c;这里的函数指针变量就可以代码一个特定类型的函数指针 int&#xff08;*&#xff09;(int a,char b)就是这种函数指针的类型 2.代码 #include <iostream>void fun() {printf("fun\n&q…

海外仓系统哪家好?闭坑指南,擦亮眼睛选对系统

可以说现在的海外仓系统市场还是比较杂乱的&#xff0c;各种不同类型&#xff0c;不同收费标准的系统比比皆是&#xff0c;这让很多想引进海外仓系统的企业不知所措&#xff0c;不知道怎么选。 今天就聊一下在选择海外仓系统的时候应该如何考量&#xff0c;才能避免被坑&#…

JS分支语句

一 三元运算符 1 语法格式&#xff1a; 条件?满足条件执行代码1:不满足条件执行代码2 2 用途 三元运算符等价于简单的if else语句&#xff0c;常用于判断取值 二 switch语句 1 语法格式&#xff1a; swtich(数据){case 值1:执行语句breakcase 值2:执行语句breakcase 值…

C++之对象的使用

1、static成员 2、static成员优点 2、static成员函数 静态成员函数不能访问非静态成员原因&#xff1a;因为没有this指针。也不可以访问非静态成员函数。 可以通过对象来访问静态成员&#xff0c;但是不推荐这么使用&#xff0c;会让人误解成这个x_是属于对象的&#xff0c;但…

贪心算法典型题目

糖果 有n个小朋友&#xff0c;有m袋糖果&#xff0c;第i袋的糖果数量是a[i]。已知n<m<2n。 每个小朋友至少要有一袋糖果&#xff0c;至多只能要两袋糖果。 分配的目标是把这m袋糖果全部分完&#xff0c;而且要使得每个小朋友最终得到的糖果数量都是相等的。 如果可以…

“大一新生接单:专业打造单页HTML网站,让你的项目脱颖而出!”

我是大一新生&#xff0c;对HTML有浓厚的兴趣&#xff0c;并且已经掌握了一些基础知识。 学会了使用htmlcss的网页设计&#xff08;暂未学JavaScript&#xff09; 如果你需要代写的服务可以在本作品下方 评论留言

PyCharm基本配置内容

如何更换 Python 解释器 输入一段代码点击运行后&#xff0c;画面下方有一个路径如图中框中所示&#xff1a; 上面的路径为虚拟路径&#xff0c;可以改为我们自己设置的路径 点击设置&#xff0c;选择settings 选择Project&#xff1a;y002———》Python Interpreter&#…

C++课程设计实验杭州电子科技大学ACM题目(中)

题目四&#xff1a;2016.数据的交换输出 题目描述 Problem Description&#xff1a; 输入n(n<100)个数&#xff0c;找出其中最小的数&#xff0c;将它与最前面的数交换后输出这些数。 Input&#xff1a;输入数据有多组&#xff0c;每组占一行&#xff0c;每行的开始是一…

python爬虫之pandas库——数据清洗

安装pandas库 pip install pandas pandas库操作文件 已知在本地桌面有一名为Python开发岗位的csv文件(如果是excel文件可以做简单修改即可&#xff0c;道理是通用的) 打开文件&#xff1a; 打开文件并查看文件内容 from pandas import DataFrame import pandas as pd data_c…

【自动驾驶技术栈学习】2-软件《大话自动驾驶》| 综述要点总结 by.Akaxi

----------------------------------------------------------------------------------------------------------------- 致谢&#xff1a;感谢十一号线人老师的《大话自动驾驶》书籍&#xff0c;收获颇丰 链接&#xff1a;大话自动驾驶 (豆瓣) (douban.com) -------------…

nuxt3+Element Plus项目搭建过程记录

背景 本文只记录项目搭建过程中遇到的一些问题和关键点&#xff0c;nuxt框架的说明和API请参照官网学习 官网&#xff1a;https://nuxt.com/docs/getting-started/introduction 1. 初始化项目 指令如下: npx nuxilatest init <project-name>我在安装过程中出现报错&a…

本地源码方式部署启动MaxKB知识库问答系统,一篇文章搞定!

MaxKB 是一款基于 LLM 大语言模型的知识库问答系统。MaxKB Max Knowledge Base&#xff0c;旨在成为企业的最强大脑。 开箱即用&#xff1a;支持直接上传文档、自动爬取在线文档&#xff0c;支持文本自动拆分、向量化、RAG&#xff08;检索增强生成&#xff09;&#xff0c;智…

AI视频智能分析技术赋能营业厅:智慧化管理与效率新突破

一、方案背景 随着信息技术的快速发展&#xff0c;图像和视频分析技术已广泛应用于各行各业&#xff0c;特别是在营业厅场景中&#xff0c;该技术能够有效提升服务质量、优化客户体验&#xff0c;并提高安全保障水平。TSINGSEE青犀智慧营业厅视频管理方案旨在探讨视频监控和视…

七人拼购新模式:革新购物体验,共创价值

在数字时代&#xff0c;消费者的购物体验正经历着前所未有的变革。七人拼购模式作为一种新兴的购物方式&#xff0c;通过汇集消费者的力量&#xff0c;实现商品价格的最优化&#xff0c;让消费者享受到前所未有的实惠与便利。以下&#xff0c;我们将以一款标价499元的商品为例&…

消防体验馆升级,互动媒体点亮安全之路!

在当下这个科技日新月异的时代&#xff0c;多媒体互动技术已深深融入现代化消防体验馆的设计之中&#xff0c;它们不仅为这些场馆注入了前所未有的创意与活力&#xff0c;更通过其互动性、趣味性等独特优势&#xff0c;彻底革新了消防宣传教育的传统模式。如今&#xff0c;这种…

边缘计算一些指标介绍

AI 性能&#xff1a; 边缘计算服务器中的AI性能参数是指用来描述服务器在进行人工智能任务时的性能表现的参数。这些参数可以包括以下几个方面&#xff1a; 计算能力&#xff1a;描述服务器处理AI任务的速度和效率。常见的指标有浮点运算能力&#xff08;FLOPS&#xff09;和图…

联想打印APP添加打印机方法

联想打印APP添加打印机操作方法&#xff1a; 1、在手机上下载“联想打印”APP&#xff1b; 2、打开“联想打印”APP,然后在软件内右下角找到“我的”图标并选择&#xff1b; 3、点击“请登录/注册”&#xff1b; 4、勾选“我已阅读并同意”然后在上面填写手机号码后&#xff0…

量子计算在科技浪潮中的引领作用

随着科技的不断进步&#xff0c;人类社会正在经历一场前所未有的技术革命。在这场革命中&#xff0c;量子计算以其独特的计算方式和巨大的计算潜力&#xff0c;正逐渐成为引领科技浪潮的重要力量。本文将深入探讨量子计算的基本原理、发展历程、应用领域以及在未来科技浪潮中的…

经典的无限极(权限管理,菜单权限)

// 权限添加 router.post(/jia,(req,res)>{ menuModel.create(req.body) res.send({ code:200, msg:添加成功 }) }) // 角色添加 router.post("/jjia",(req,res)>{ req.body.pidJSON.parse(req.body.pid) roleModel.create(req.body) res.send({ code:200, …

克服焦虑与迷茫:在学习与成长的旅程中找到自我

在现代社会&#xff0c;信息和技术的快速发展使得我们时常感到追赶不及。在学习和工作中&#xff0c;我们经常会遇到这样的问题&#xff1a;自己做不出来的题别人会做&#xff0c;自己写不出的代码别人会写。这种情况常常让我们感到焦虑和迷茫。然而&#xff0c;如何面对和克服…