百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

Vue中Promise的使用(vue中promise的用法)

liuian 2025-03-25 15:21 19 浏览

在我们实际中最常用到的是异步操作时,对异步操作进行封装,Promise 是一个函数返回的对象,我们可以在它上面绑定回调函数。

promise的简单使用

let p = new Promise((resolve,reject)=>{
    //实现异步数据处理任务
    //当处理成功时调用resolve方法
    resolve("处理成功");
    //当处理失败时调用reject方法
    reject("处理失败");
});

p.then(result=>{
    //从resolve得到正常结果
  
},function(error=>{
    //从reject得到错误信息
            
});  

从代码中我们可以看出Promise可以接受两个方法函数分别对应异步操作的结果,一个是成功后的回调一个是失败后的回调。

Promise常用的API

实例方法
new Promise 来创建对象
p.then()得到异步任务的正确结果
p.catch()获取异常信息

使用方式1

let p = new Promise((resolve,reject)=>{
    //实现异步数据处理任务
    //当处理成功时调用resolve方法
    resolve("处理成功");
    //当处理失败时调用reject方法
    reject("处理失败");
});

p.then(result=> {
        console.log(result);
    })
    .catch(error=> {
        console.log(error);
    })

使用方式2

let p = new Promise((resolve,reject)=>{
    //实现异步数据处理任务
    //当处理成功时调用resolve方法
    resolve("处理成功");
    //当处理失败时调用reject方法
    reject("处理失败");
});
p.then(result=>{
        console.log(result);
    },
    error=> {
        console.log(error);
    })

在这里说明一点就是当我们new Promise的时候,其实里面的处理逻辑是没有执行的,只有当调用then函数的时候才是处理逻辑执行的时候。

多个异步任务处理

1、Promise.all()方法

当处理并发多个异步任务,所有任务都执行完成才表示通过

let p1 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p2 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p3 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

Promise.all([p1,p2,p3]).then((result)=>{
    console.log(result);
})

这个时候只有p1、p2、p3同时调用resolve方法数据处理成功的时候,Promise.all方法才会代表执行通过。

2、Promise.race()方法

当处理并发多个异步任务,只要其中有一个任务完成就表示执行通过

let p1 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p2 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p3 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

Promise.race([p1,p2,p3]).then((result)=>{
    console.log(result);
})

这个时候只要p1、p2、p3中至少有一个调用resolve方法数据处理成功的时候,Promise.race方法就代表执行通过。

相关推荐

MySQL合集-mysql5.7及mysql8的一些特性

1、Json支持及虚拟列1.1jsonJson在5.7.8原生支持,在8.0引入了json字段的部分更新(jsonpartialupdate)以及两个聚合函数,JSON_OBJECTAGG,JS...

MySQL 双表架构在房产中介房源管理中的深度实践

MySQL房源与价格双表封神:降价提醒实时推送客户房产中介实战:MySQL空间函数精准定位学区房MySQL狠招:JSON字段实现房源标签自由组合筛选房源信息与价格变更联动:MySQL黄金搭档解决客户看...

MySQL 5.7 JSON 数据类型使用总结

从MySQL5.7.8开始,MySQL支持原生的JSON数据类型。MySQL支持RFC7159定义的全部json数据类型,具体的包含四种基本类型(strings,numbers,boolea...

MySQL 8.0 SQL优化黑科技,面试官都不一定知道!

前言提到SQL优化,大多数人想到的还是那些经典套路:建索引、避免全表扫描、优化JOIN顺序…这些确实是基础,但如果你还停留在MySQL5.7时代的优化思维,那就out了。MySQL8.0已经发布好...

如何在 MySQL 中使用 JSON 数据(mysql的json函数与实例)

在MySQL中学习“NoSQL”MySQL从5.7版本开始就支持JSON格式的数据类型,该数据类型支持JSON文档的自动验证和优化存储和访问。尽管JSON数据最好存储在MongoDB等...

MySQL中JSON的存储原理(mysql中json字段操作)

前言:表中有json字段后,非索引查询性能变得非常糟糕起因是我有一张表,里面有json字段后,而当mysql表中有200w数据的时候,走非索引查询性能变得非常糟糕需要3到5s。因此对mysql的jso...

mysql 之json字段详解(多层复杂检索)

MySQL5.7.8开始支持JSON数据类型。MySQL8.0版本中增加了对JSON类型的索引支持。示例表CREATETABLE`users`(`id`intNOTNULLAU...

VMware vCenter Server 8.0U3b 发布下载,新增功能概览

VMwarevCenterServer8.0U3b发布下载,新增功能概览ServerManagementSoftware|vCenter请访问原文链接:https://sysin.or...

Spring Boot 3.x 新特性详解:从基础到高级实战

1.SpringBoot3.x简介与核心特性1.1SpringBoot3.x新特性概览SpringBoot3.x是建立在SpringFramework6.0基础上的重大版...

如何设计Agent的记忆系统(agent记忆方法)

最近看了一张画Agent记忆分类的图我觉得分类分的还可以,但是太浅了,于是就着它的逻辑,仔细得写了一下在不同的记忆层,该如何设计和选型先从流程,作用,实力和持续时间的这4个维度来解释一下这几种记忆:1...

Spring Boot整合MyBatis全面指南:从基础到高级应用(全网最全)

一、基础概念与配置1.1SpringBoot与MyBatis简介技术描述优点SpringBoot简化Spring应用开发的框架,提供自动配置、快速启动等特性快速开发、内嵌服务器、自动配置、无需X...

5大主流方案对比:MySQL千亿级数据线上平滑扩容实战

一、扩容方案剖析1、扩容问题在项目初期,我们部署了三个数据库A、B、C,此时数据库的规模可以满足我们的业务需求。为了将数据做到平均分配,我们在Service服务层使用uid%3进行取模分片,从而将数据...

PostgreSQL 技术内幕(五)Greenplum-Interconnect模块

Greenplum是在开源PostgreSQL的基础上,采用MPP架构的关系型分布式数据库。Greenplum被业界认为是最快最具性价比的数据库,具有强大的大规模数据分析任务处理能力。Greenplu...

在实际操作过程中如何避免出现SQL注入漏洞

一前言本文将针对开发过程中依旧经常出现的SQL编码缺陷,讲解其背后原理及形成原因。并以几个常见漏洞存在形式,提醒技术同学注意相关问题。最后会根据原理,提供解决或缓解方案。二SQL注入漏洞的原理、形...

运维从头到尾安装日志服务器,看这一篇就够了

一、rsyslog部署1.1)rsyslog介绍Linux的日志记录了用户在系统上一切操作,看日志去分析系统的状态是运维人员必须掌握的基本功。rsyslog日志服务器的优势:1、日志统一,集中式管理...