异步操作,promise、axios

一、异步操作(异步编程)、同步操作

异步操作是指在编程中,某个任务的执行不会立即完成,同时不会阻塞后续代码的执行。在异步操作中,程序可以继续运行,并在异步任务完成时得到通知并处理结果。这与同步操作相对,同步操作会阻塞程序的继续执行直到任务完成。

二、Promise

Promise 是 JavaScript es6 的一个特性,它允许你在异步操作(如网络请求)完成后执行某些代码。它代表了一个将来才会知道结果的操作。Promise 可以处于以下三种状态之一:

  • Pending(进行中):初始状态,既没有成功,也没有失败,也可以叫做等待态。

  • Fulfilled(已成功):操作成功完成。

  • Rejected(已失败):操作失败。

具体步骤

一、

let promise = new Promise((resolve, reject) => {// 异步操作if (1、0) {resolve(value); // 成功时调用  为1的时候表示调用成功} else {reject(error); // 失败时调用   为0的时候表示失败调用}
});

二、使用 Promise 

promise.then(value => { /* 处理成功时的内容 */ },error => { /* 处理失败时的内容 */ }
);

三、catch():用于捕获 Promise 中发生的错误。  

promise.catch(error => { /*错误处理的内容 */ }
);

成功时用.then,失败处理则用.catch()

四、使用finally:不管是成功还是失败,都可以使用.finally() 

promise.finally(() => {// 写需要执行的代码内容。
});

总结一下:

 

举个小栗子:

创建一个请求id的函数,该函数返回一个promise,该promise在2秒后解决(成功),返回一个数字(也即指定商品列表的id)(提示:2秒后成功解决,请用setTimeout来模拟)

创建一个请求商品列表的函数,该函数接受一个id,该promise在3秒后解决(成功),返回一个商品列表,商品列表的数据如下

数据:

const data = {code:0,data:[{ goodsName: '袜子', price: 20 },{ goodsName: 'T恤', price: 25 },{ goodsName: '牛仔裤', price: 50 },{ goodsName: '连衣裙', price: 70 },{ goodsName: '运动鞋', price: 80 },{ goodsName: '夹克', price: 120 },{ goodsName: '帽子', price: 15 },{ goodsName: '围巾', price: 30 },{ goodsName: '手套', price: 18 },{ goodsName: '裙子', price: 60 },{ goodsName: '卫衣', price: 90 },
],
}

解题代码:

<template>
</template><script setup>
import { ref } from 'vue';
const data = ref('[]')
const getid = () => {return new Promise((resolve, project) => {setTimeout(() => {resolve(2)}, 3000)})
};const getlist = (id) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve([{code: 0,data: [{ goodsName: '袜子', price: 20 },{ goodsName: 'T恤', price: 25 },{ goodsName: '牛仔裤', price: 50 },{ goodsName: '连衣裙', price: 70 },{ goodsName: '运动鞋', price: 80 },{ goodsName: '夹克', price: 120 },{ goodsName: '帽子', price: 15 },{ goodsName: '围巾', price: 30 },{ goodsName: '手套', price: 18 },{ goodsName: '裙子', price: 60 },{ goodsName: '卫衣', price: 90 },]}]);}, 3000);});
};
//开始使用getid()函数
getid().then((id) => {console.log('成功2' + '+', id);return getlist();
}).then((res) => {const data = res[0]console.log('成功3' + JSON.stringify(data));
})
</script><style scoped></style>

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

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

相关文章

Ansible的yum和saltstack的哪个功能相似

Ansible的yum和saltstack的哪个功能相似 在 Ansible 和 SaltStack 中&#xff0c;Ansible 的 yum 模块 和 SaltStack 的 pkg 模块 功能相似。它们都用于管理软件包&#xff0c;支持安装、升级、删除和查询等操作。 Ansible 的 yum 模块 用途&#xff1a; 专门用于基于 Red Hat …

JVM 面试题相关总结

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

基于BiLSTM-CRF的中文电子病历命名实体识别

声明&#xff1a;博客未经允许禁止抄袭转载。 前言 最近有粉丝在后台私信我能不能更一篇关于命名实体识别(NER&#xff0c;Named Entity Recognition)的经典模型BiLSTM-CRF的实战文章&#xff0c;前段时间有点忙所有一直没有更新&#xff0c;趁着最近有点空&#xff0c;满足一…

k8s 优雅监控jvm及dump heap的方案探讨

背景 k8s cluster 的健康检测失败会主动重启pod&#xff0c;而大部份情况下健康检测失败都是由full gc引起的。往往发生重启时已经没有条件dump heap排查full gc的原因。 如何监控 为了避免因健康检测失败而导致的pod重启&#xff0c;我们需要实施有效的监控策略&#xff0c;这…

TPM 2.0:安全固件的新标准

得益于可信计算组 ( TCG ) 推出的全新 TPM 2.0规范&#xff0c;联网设备可以更好地抵御网络攻击&#xff0c;并且不太可能受到错误的攻击。 制造商将可信平台模块 (TPM) 附加到设备上&#xff0c;以帮助用户和管理员验证其身份、生成和存储加密密钥以及确保平台完整性。 在 T…

ensp实验-vrrp多网关配置

一、交换机与路由的配置区别 1. 角色定义交换机&#xff1a; Master 或 Backup: 交换机通常作为 Master 或 Backup 设备参与 VRRP&#xff0c;负责在主设备故障时接替其工作。路由器&#xff1a; Master 或 Backup: 路由器同样可以作为 Master 或 Backup 设备…

黑盒测试方法

‌黑盒测试是一种软件测试方法&#xff0c;它通过向系统提供输入并检查输出结果来验证系统的功能是否符合需求。‌黑盒测试主要关注软件的功能性&#xff0c;而不是其内部结构或工作原理。以下是几种常见的黑盒测试顺序方法&#xff1a; 场景设计法‌&#xff1a; 通过模拟实际…

游戏引擎学习第38天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾上次的内容。 我们之前讨论了将精灵放在屏幕上&#xff0c;但颜色错误的问题。问题最终查明是因为使用了一个调整工具&#xff0c;导致文件的字节顺序发生了变化。重新运行“image magic”工具对一些大图像进行重新处理后&am…

aws(学习笔记第十六课) 使用负载均衡器(ELB)解耦webserver以及输出ELB的日志到S3

aws(学习笔记第十六课) 使用负载均衡器(ELB)以及输出ELB的日志到S3 学习内容&#xff1a; 使用负载均衡器(ELB)解耦web server输出ELB的日志到S3 1. 使用负载均衡器(ELB) 全体架构 使用ELB(Elastic Load Balancer)能够解耦外部internet访问和web server之间的耦合&#xff0c…

深入理解C#的TCPIP通信机制

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;在分布式系统和实时数据交换应用中&#xff0c;C#作为一种现代面向对象编程语言&#xff0c;利用其***命名空间下的Socket类&#xff0c;提供强大的TCP/IP通信功能。本文将探讨C#中TCP/IP通信的基本概念、使用方…

高项 - 项目管理原则与项目绩效域

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 博文更新参考时间点&#xff1a;2024-12 高项 - 章节与知识点汇总&#xff1a;点击跳转 文章目录 高项 - 项目管理原则与项目绩效域项目管理12条原则原则1&#xff1a;成为勤勉、尊重和关心他人的管家 (p202)原则…

仿真技术助力高尔夫球打破传统设计局限,实现球杆强大的功能

Altair近日宣布与业内领先的高尔夫装备制造商 Cleveland Golf 开展合作&#xff0c;以设计新款 HiBore XL 球杆。借助 Altair 先进的仿真与设计技术&#xff0c;Cleveland Golf 不断刷新高尔夫装备的行业标准&#xff0c;并在球杆产品设计方面实现突破。 Cleveland Golf 借助 A…

python字符串处理基础操作总结

1.去掉空格或者特殊符号 input_str.strip() #去掉所有空格 input_str.lstrip() #去掉左边空格 input_str.rstrip() #去掉右边空格 def print_hi():input_str 今天天气不错&#xff0c;风和日丽 out input_str.strip()print(input_str)print(out)if __name__ __main__:print…

Trimble X9三维激光扫描仪高效应对化工厂复杂管道扫描测绘挑战【沪敖3D】

化工安全关系到国计民生&#xff0c;近年来随着化工厂数字化改革不断推进&#xff0c;数字工厂逐步成为工厂安全管理的重要手段。而化工管道作为工厂设施的重要组成部分&#xff0c;由于其数量多、种类繁杂&#xff0c;一直是企业管理的重点和难点。 传统的化工管廊往往缺乏详…

日志基础示例python和c++

文章目录 0. 引言1. python2. c 0. 引言 本文主要记录python版本和c版本常用的日志基础示例。 1. python python版本常用的是logging库&#xff0c;结合colorlog库&#xff0c;可根据不同日志级别打印不同颜色的日志&#xff0c;为了便于分析问题&#xff0c;还添加了日志保…

【Linux】基础IO-----文件详解

目录 一、文件理解&#xff1a; 二、C语言的文件操作&#xff1a; 1、fopen&#xff1a; 什么是当前路径&#xff1a; 2、fclose&#xff1a; 3、fwrite&#xff1a; 4、默认打开的三个流&#xff1a; 三、系统文件&#xff1a; 1、open&#xff1a; 2、close&#xf…

第7章:响应式设计 --[CSS零基础入门]

什么是响应式设计 响应式设计&#xff08;Responsive Web Design, RWD&#xff09;是一种网页设计和开发的方法&#xff0c;它使网站能够根据用户的设备特性&#xff08;如屏幕尺寸、分辨率、方向等&#xff09;自动调整其布局和内容。响应式设计的目标是确保网站在不同类型的…

探索 ONLYOFFICE 8.2 版本:更高效、更安全的云端办公新体验

引言 在当今这个快节奏的时代&#xff0c;信息技术的发展已经深刻改变了我们的工作方式。从传统的纸质文件到电子文档&#xff0c;再到如今的云端协作&#xff0c;每一步技术进步都代表着效率的飞跃。尤其在后疫情时代&#xff0c;远程办公成为常态&#xff0c;如何保持团队之间…

Vue-打印自定义HTML表格

自定义打印方法 1. 准备HTML结构 首先&#xff0c;构造了一个基本的HTML页面框架&#xff0c;并设置了页面的字符编码为UTF-8&#xff0c;以确保中文和其他特殊字符能正确显示。页面的标题设置为传入的 title 参数值。 let printStr "<html><head><met…

http1.0、1.1、2.0、 3.0

http1.0、1.1、2.0、 3.0 http1.1 引入长连接&#xff0c;在1.0&#xff0c;每次请求都需要建立新的TCP连接&#xff0c;处理请求完毕后立即断开。就导致处理大量图片&#xff0c;链接等资源&#xff0c;需要大量的连接与断开&#xff0c;造成资源浪费和时间延迟。而长连接允许…