31、js - Promise

news2024/11/24 6:59:15

一、Promise要点

-> js中,只有Promise对象才可以使用.then().catch()方法。

-> axios可以使用.then().catch(),完全是因为调用axios(),返回的是一个Promise对象。

-> new Promise() 里面的代码是同步代码,一旦调用promise对象就会立即执行new Promise()里的代码。

-> 只有.then().catch()里面的代码才是异步代码。

二、Promise的3种状态

1、作用:了解Promise对象如何关联的处理函数,以及代码执行顺序

2、一个Promise对象,必然处于以下几个状态之一:

pending:初始状态,页面一旦调用Promise对象,Promise对象就会立刻处于pending状态

fulfilled:意味着操作成功完成

rejected:意味着操作失败完成

3、注意⚠️:

Promise对象的状态一旦是fulfilled或者rejected,状态就无法再被改变,也就是说一旦是fulfilled状态,就无法再改为rejected状态。

->调用了resolve(),把状态改成了fulfilled,then()里面的代码就会自动执行.

->调用了reject(),把状态改成了rejected,catch()里面的代码就会自动执行.

例如:如果代码里同时写了resolve(3); reject(4); 最后只会执行resolve()方法,不会执行reject()方法。这就是Promise对象的状态一旦是fulfilled或者rejected,状态就无法再被改变。

    const p = new Promise((resolve, reject) => {

        setTimeout(() => {
             resolve(1);
            //reject(2);
        }, 3000);

    });

    console.log(p);

    p.then(data => {
        console.log(data);
    }).catch(error => {
        console.log("我是Promise错误", error);
    })

一运行js,js会马上打印p对象,如果此时3秒内立马点击控制台的Promise对象,就是处于pending状态。也就是说,页面一旦调用Promise对象,Promise对象就会立刻处于pending状态。

就算3秒后setTimeout运行完了,也依然是pending状态。

只有当3秒后setTimeout运行完了,你再点击控制台的Promise对象,才会显示对应的fulfilled或者rejected状态。

    const p = new Promise((resolve, reject) => {

        setTimeout(() => {
            resolve(3);
            reject(4);
        }, 3000);

    });

    console.log(p);

    p.then(data => {
        console.log(data);
    }).catch(error => {
        console.log("我是Promise错误", error);
    })

如果代码里同时写了resolve(3); reject(4); 最后只会执行resolve()方法,不会执行reject()方法。这就是Promise对象的状态一旦是fulfilled或者rejected,状态就无法再被改变。

三、Promise的链式调用

解决回调函数地狱问题

做法:在每一个.then()方法里面return一个Promise对象

new Promise((resolve, reject) => {
        resolve(1);
    }).then(res => {
        console.log(res); // 1
        return new Promise((resolve, reject) => {
            resolve(res + 2);
        })
    }).then(res => {
        console.log(res); // 3
        return new Promise((resolve, reject) => {
            reject(res + 2);
        })
    }).then(res => {
        console.log(res); // 因为上面有reject,所以这里不会再执行
    }).catch(error => {
        // 上面任意一个promise对象发生错误都会在这里进行捕获
        // 一旦发生reject,后面的promise对象的.then()将不会再执行
        console.log("error", error); // error 5
    })

上面的代码相当于下面这样写:

    const a1 = new Promise((resolve, reject) => {
        resolve(1);
    });

    const a2 = a1.then(res => {
        console.log(res); // 1
        return new Promise((resolve, reject) => {
            resolve(res + 2);
        });
    });

    const a3 = a2.then(res => {
        console.log(res); // 3
        return new Promise((resolve, reject) => {
            resolve(res + 2);
        });
    });

    const a4 = a3.then(res => {
        console.log(res); // 5
    });

四、Promise.all()

Promise的静态方法 Promise.all()

作用:高并发处理,同时发送请求,可以做到在所有请求都得到结果后再统一渲染页面数据

语法:Promise.all([p1, p2, p3, p4]) all方法里传一个数组,数组由多个Promise对象组成

返回结果:会返回一个新的Promise对象,.then()得到的结果是all()方法里多个Promise对象的结果组成的数组,.catch()方法里只要有一个请求发生错误就会走catch

    const p1 = axios({
        url: 'http://hmajax.itheima.net/api/weather',
        params: {
            city: '110100'
        }
    })

    const p2 = axios({
        url: 'http://hmajax.itheima.net/api/weather',
        params: {
            city: '110100'
        }
    })

    const p3 = axios({
        url: 'http://hmajax.itheima.net/api/weather',
        params: {
            city: '110100'
        }
    })

    const result = Promise.all([p1, p2, p3]).then(res => {
        console.log(res);
    }).catch(error => {
        // 只要有一个请求发生错误就会走catch
        console.log(error);
    })

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

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

相关文章

这个API Hub太厉害了,太适合接口测试了,收录了钉钉企业微信等开放Api的利器

目录 前言: 01API Hub的项目 02API Hub 03调试 04 API 调试 05 API mock 06 针对开放项目功提供者 08 下载 前言: API Hub 的优势在于它提供了完整的 API 管理解决方案,包括API的设计、接口调试、测试和文档管理等。通过集中管理API…

火热报名中 | KCD 北京精彩抢“鲜”看

​ 仲夏已至,风云再起,Kubernetes Community Days 北京站英雄帖一经发出,云原生的各路英雄豪杰纷纷响应。经典招式的升级亮相,最新技巧的惊喜面世,且看各路门派京城聚首,掀起一场云原生的武林论道。各大议…

深入解析Cloudflare五秒盾与爬虫绕过技巧

最近一个朋友发现一个比较有趣的网站,他说正常构造一个HTTP请求居然拿不到网站页面的信息,网站页面如下: 别看它只是一个普普通通的小说网站。随后我在本地环境验证了一下,果不其然得到了以下信息: 从上面反馈的信息…

Yakit: 集成化单兵安全能力平台使用教程·进阶篇

Yakit: 集成化单兵安全能力平台使用教程进阶篇 1.数据处理数据对比Codec2.插件仓库1.数据处理 数据对比 该功能主要提供一个可视化的差异比对工具,用于分析两次数据之间的区别。使用场景可能包括:枚举用户名时比较登录成功和失败时服务器端反馈结果的差异、使用 Web Fuzzer…

【css3实现华为充电】那些你没想到的CSS效果之华为充电效果(附源码下载)

【写在前面】今天是高考的第二天,在这里我也祝各位学子能够旗开得胜,进入自己理想的大学,借着今天这个吉日我就和大家介绍一下如何用css实现华为充电效果。 涉及知识点:CSS3特效,华为充电特效实现,CSS属性f…

部署DR模式 LVS负载均衡群集

部署DR模式 LVS负载均衡群集 一、LVS-DR数据包流向分析二、DR模型的特点三、DR模式 LVS负载均衡群集部署 一、LVS-DR数据包流向分析 (1)客户端发送请求到 Director Server(负载均衡器),请求的数据报文(源 …

SYSU程设c++(第十五周)

vector容器 1.要开vector库 2.vector<T> 是动态的连续数组&#xff0c;可以列表初始化 vector<int> ivec(10, 2); //创建10个值为2的元素 3.可以靠[ ]、at(int)、front、back、迭代器访问其中元素&#xff0c;其中at会自动检查下标越界&#xff0c;抛出异常 4.迭…

【资料分享】ESD防护设计-常见ESD保护电路图

ESD防护设计 ESD防护设计的目的是&#xff0c;当集成电路任意两个输入/输出引脚之间发生ESD事件时&#xff0c;集成电路内部的ESD防护系统能及时开启来泄放掉大量的瞬时电流/电压,使内部电路免遭破坏。此外&#xff0c;在集成电路正常工作时&#xff0c;即未发生ESD事件时&…

Jmeter Suite安装中influx一直处于pending状态

目录 【前言】 【背景说明】 【问题表现】 【排查思路】 简单重试 深入分析 直面本质 【小结】 【写在最后】 完整版文档下载方式&#xff1a; 【前言】 今天要和大家聊聊一个关于Jmeter Suite安装的问题——“influx一直处于pending状态”。 作为一名老测试&#…

文心一言 VS 讯飞星火 VS chatgpt (35)-- 算法导论5.3 5题

五、证明:在过程 PERMUTE-BY-SORTING的数组 P中&#xff0c;所有元素都唯一的概率至少是1-1/n。 文心一言&#xff1a; 证明&#xff1a; 在过程PERMUTE-BY-SORTING中&#xff0c;对于输入数组P中的每个元素&#xff0c;其出现次数为1&#xff0c;因此对于每个元素&#xff…

配置Linux服务器时间同步

这里说一下为什么要配置时间同步这个问题&#xff0c;为了避免各虚拟机的时间出现不一致的情况而引发集群故障。这里还要了解一下什么是系统时间&#xff0c;什么是硬件时间。   这里配置时间同步我选择的是Chrony。Chrony是网络时间协议&#xff08;NTP&#xff09;的通用实…

这11款协同软件大大提升你的工作效率

无论是产品经理还是开发工程师&#xff0c;他们都是各自领域的专家&#xff0c;所以他们可以成为设计过程的一部分。 协作设计软件为设计过程提供了沟通方式和工具&#xff0c;以便团队成员甚至客户能够交流、分享他们的意见和想法。 本文将盘点11个协作设计软件&#xff01;…

Jenkins DingTalk 钉钉通知插件

目录 前言 一、相关文档 二、组件版本 三、钉钉配置 四、Jenkins配置 1、安装钉钉插件DingTalk 2、在Jenkins用户管理中填写钉钉手机号 3、在Jenkins中配置钉钉 5、在流水线任务中编写pipeline 写在最后 完整版文档下载方式&#xff1a; 前言 今天要和大家聊聊一个…

docker安装golang

最近玩 docker 比较多&#xff0c;试试安装 golang 操作系统&#xff1a;Linux 第一步 先看一下镜像&#xff1a; docker images 看一下我们目前的镜像中&#xff0c;是不是有go 如果有&#xff0c;版本不合适等&#xff0c;可以考虑删除&#xff0c;重新安装&#xff0c;也…

【嵌入式烧录/刷写文件】-1.9-S19文件的地址对齐Address Alignment

案例背景(共5页精讲): 对一个Motorola S-record(S19/SREC/mot/SX)文件&#xff0c;进行地址对齐Address Alignment。 目录 1 为什么要进行“地址对齐Address Alignment” 1.1 “对齐长度”的选择 2 使用Vector HexView工具对S19文件进行“地址对齐Address Alignment” 2.1…

SpringBoot统一功能的处理

目录 SpringBoot拦截器 自定义拦截器 将自定义拦截器加入系统配置项 统一异常处理 创建异常处理类 实现业务方法 统一数据返回格式 为什么需要统一数据返回格式 统一数据返回格式的实现 返回String时的报错愿意及处理方案 SpringBoot拦截器 使用SpringBoot拦截器来实现…

Figma文件保存图片教程,4个详细步骤一网打尽!

在设计领域中&#xff0c;Figma 作为一款备受欢迎的在线协同设计软件&#xff0c;给设计师们带来了许多便利。然而&#xff0c;Figma 目前并不能直接保存图片。那么&#xff0c;有没有什么方法可以解决这个问题呢&#xff1f;答案是使用「即时设计」&#xff0c;这是一款国产的…

Git初始化提交项目代码并与远端建立连接

如题 闲来无事&#xff0c;炒个冷饭。。。 步骤 1. 先本地建仓库 方法一&#xff1a; 执行命令&#xff08;使用git bash或者类似工具&#xff0c;或者IDEA下terminal命令行&#xff09;&#xff1a; git init会在当前目录下创建一个新的空Git库。 方法二&#xff1a; 在…

JDBC API 万字详解(通俗易懂)

目录 一、前言 二、JDBC API概述 三、获取连接的三种方式 0.朝花夕拾 : 1.方式一 —— 通过new关键字 : 2.方式二 —— 通过反射机制 : 3.方式三 —— 通过DriverManager Δ方式三简化版 Δ方式三优化版 四、 ResultSet 1.简介 : 2.代码演示 : 3.底层实现 : 五、SQL…

20分钟搞定 Stable Diffusion 模型在线服务部署

文章目录 AIGC之 AI 绘画20分钟搞定 Stable Diffusion 模型在线服务部署认识 Amazon SageMaker借助 Amazon SageMaker 进行环境搭建和模型推理1. 创建 jupyter notebook 运行环境2. 一键运行所有代码 关键代码分析如下1. 环境准备&#xff0c;代码模型下载2. 在Notebook中配置并…