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

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

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

在我们实际中最常用到的是异步操作时,对异步操作进行封装,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方法就代表执行通过。

相关推荐

面试问了解Linux内存管理吗?10张图给你安排的明明白白!

来源:https://www.cnblogs.com/NanoDragon/p/12736887.html今天来带大家研究一下Linux内存管理。对于精通CURD的业务同学,内存管理好像离我们很远...

Linux Kernel 6.12震撼发布:实时性能飙升,开启全新计算时代!

概述LinusTorvalds在邮件列表中宣布推出LinuxKernel6.12,该版本带来了多项重要的更新和功能增强。更新亮点PREEMPT_RT支持主要内容:LinuxKernel...

linux Grub2功能、常见配置及使用方式

Grub2(GrandUnifiedBootloaderversion2)是一款功能强大的引导加载程序,提供了以下功能和常见配置:多操作系统支持:Grub2可以加载和引导多个操作系统,包括不同...

Linux内核必备知识点-platform总线详解

platform总线是学习linux驱动必须要掌握的一个知识点。本文参考已发布:Linux3.14内核一、概念嵌入式系统中有很多的物理总线:I2c、SPI、USB、uart、PCIE、APB、AHB...

linux kernel内核的头文件获取、安装等方法

交叉编译时经常会用到这些头文件。下载合适版本的linux地址:https://mirrors.aliyun.com/linux-kernel/https://mirrors.edge.kernel.o...

600个常用 Linux 命令,收藏备用!

本文为Linux命令大全,从A到Z都有总结,建议大家收藏以便查用,或者查漏补缺!A命令描述access用于检查调用程序是否可以访问指定的文件,用于检查文件是否存在accton用于打开或关闭记帐进程或...

Linux 中 `/proc/cpuinfo`文件中最常见的标志

/proc/cpuinfo是一个虚拟文件系统,在Linux系统中提供有关CPU(中央处理器)的信息。通过读取该文件,您可以获取有关处理器的详细信息,如型号、频率、核心数、缓存大小等。本文将介绍...

600个Linux命令大全,从A到Z,2023年收藏大吉!

本文为Linux命令大全(有PDF),从A到Z都有总结,建议大家收藏以便查用,或者查漏补缺!A命令描述access用于检查调用程序是否可以访问指定的文件,用于检查文件是否存在accton用于打开或关闭...

Linux下如何查看硬件信息?

我们在Linux下进行开发时,有时也需要知道当前的硬件信息,比如:CPU几核?使用情况?内存大小及使用情况?USB设备是否被识别?等等类似此类问题。下面良许介绍一些常用的硬件查看命令。lshwls...

从PXE到GRUB到VHD文件启动

今天玩点花活儿,之前的文章再探从VHD文件中启动Windows及Grub双启动VHD文件+TinyCoreLinux中研了一下GRUB和VHD文件的关联应用,那么结合PXE又会是怎么样的呢?...

bootra1n教学:Windows用户用U盘Linux实现checkra1n越狱方法

checkra1n越狱工具在前几天推出Linux版本,相信对于Windows用户可能也看得很模糊,甚至要切割硬碟到安装Linux系统太过于繁杂,这篇要来教大家最简易最快速利用U盘Linux...

不了解NUMA,就看不懂Linux内核

哈喽,我是子牙,一个很卷的硬核男人深入研究计算机底层、Windows内核、Linux内核、Hotspot源码……聚焦做那些大家想学没地方学的课程。为了保证课程质量及教学效果,一年磨一剑,三年先后做了这...

Linus Torvalds接受微软Hyper-V升级 下一代Linux启动会更快

虽然Windows的粉丝和Linux的粉丝经常喜欢进行激烈的键盘大战,但操作系统的制造商们自己也了解彼此的优缺点。毫无疑问,微软也明白这一点,事实上,它甚至鼓励用户尝试Linux,尽管是使用...

deepin使用笔记——开机卡LOGO,无法正常关机的解决办法

第一次使用deepin操作系统,很容易遇到几种情况:1,开机卡LOGO,无法进入系统。2,开机可以进入系统,但是进入系统后桌面环境无法正常打开,一直卡着什么都不能用。3,开机后看似一切正常,但关机的时...

如何检查Linux系统硬件信息?从CPU到显卡,一网打尽!

你可能会问:“我为什么要关心硬件信息?”答案很简单:硬件是Linux系统的根基,了解它可以帮你解决很多实际问题。比如:性能调优:知道CPU核心数和内存大小,才能更好地调整程序运行参数。故障排查:系统卡...