Promise

于 2020-07-29 15:32:37 发布
阅读量133 收藏 1
点赞数
分类专栏： Promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang__lei/article/details/107664618
版权

Promise的使用



一、什么是Promise？

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise


  1. Promise是ES6一个非常好用的特性
  2. Promise是异步编程的一种解决方案
  3. Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值


二、语法


new Promise( function(resolve, reject) {...} /* executor */  );

参数

创建实例对象时需要传入一个有 resolve 和 reject 两个参数的executor函数 。Promise构造函数执行时立即调用executor函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）。resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。executor 内部通常会执行一些异步操作，一旦异步操作执行完毕(可能成功/失败)，要么调用resolve函数来将promise状态改成fulfilled，要么调用reject 函数将promise的状态改为rejected。如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。

总结：

  1. 通过 new 关键字创建一个 Promise 实例的时候，需要传入一个函数，这里的函数就是上边的 executor
  2. executor 函数里边还有两个参数，这两个参数分别是 resolve 和 reject ，这两个参数的本质有是一个函数。
  3. resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败），Promise的状态见下：


三、Promise的状态


在这里插入图片描述

在这里插入图片描述

在这里插入图片描述



四、代码演示


4.1 Promise的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    //什么情况下会用到Promise？
    //一般情况下是有异步操作时，使用Promis对这个异步操作进行封装
    //new -》 构造函数（1.保存一些状态信息  2.执行传入的函数）
    //在执行传入的回调函数时，会传入两个参数，resolve，reject，本身又是函数
    new Promise((resolve, reject) => {

        //此处用来包裹异步请求，用setTimeout来模拟异步请求
        setTimeout(() => {
            // 成功的时候调用resolve
            resolve('success message')

            //失败的时候调用reject
            reject('error message')
        },1000)

    }).then((success) => { //成功时调用该函数
        console.log(success);
        console.log(success);
        console.log(success);

    }).catch((error) => { //失败时调用该函数
        console.log(error);
        console.log(error);
        console.log(error);
    })
</script>
</body>
</html>

4.2 Promise的另一种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    new Promise((resolve,reject) => {
        // 把setTimeout当做异步请求，此处进行包裹
        setTimeout(() => {
            //成功时调用该函数
            resolve('success message')

            //失败时调用该函数
            reject('error message')
        },1000)

    // 在then处可以一次传入两个函数，成功时调用第一个函数，失败时调用第二个函数
    }).then((success) => { //成功时调用该函数
        console.log(success);
    },(error) => { //失败时调用该函数
        console.log(error);
    })
</script>
</body>
</html>

4.3 Promise的链式调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    // Promise里边的参数是一个函数  ——》 （resolve，reject）
    // resolve，reject本身又是一个函数
    // 链式编程
    new Promise((resolve,reject) => {
        //里面用来包裹异步请求，此处用setTimeout来代替异步请求
        //第一次网络请求的代码
        setTimeout(() => {
            //成功时调用该函数
            resolve()
        },1000)
    }).then(() => {//成功时调用该函数
        //第一次拿到结果的处理代码
        console.log('Hello Java');
        console.log('Hello Java');
        console.log('Hello Java');

        return new Promise((resolve,reject) => {

            //第二次网络请求的代码
            setTimeout(() => {
                resolve()
            },1000)
        })
    }).then(() => {
        //第二次拿到结果处理代码
        console.log('Hello VueJs');
        console.log('Hello VueJs');
        console.log('Hello VueJs');

        return new Promise((resolve,reject) => {

            //第三次网络请求的代码
            setTimeout(() => {
                resolve()
            },1000)
        })
    }).then(() =>{
        //第三次拿到结果处理代码
        console.log('Hello Python');
        console.log('Hello Python');
        console.log('Hello Python');
    })

</script>

</body>
</html>

4.3 Promise的链式调用小案例


需求

网络请求：aaa -> 自己处理（10行）
处理：aaa111 -> 自己处理（10行）
处理：aaa111222 -> 自己处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    // wrapped into
    //网络请求：aaa  -> 自己处理（10行）
    //处理：aaa111  -> 自己处理（10行）
    //处理：aaa111222 -> 自己处理
    new Promise((resolve,reject) => {

        setTimeout(() => {
            resolve('aaa')
        },1000)
    }).then(res => {
        //1.自己处理10行代码
        console.log(res, '第一层的10行处理代码');

        //2.对结果进行第一次的处理
        return new Promise((resolve) => {
            resolve(res + '111')
        })
    }).then(res => {
        console.log(res, '第二层的10行处理代码');

        //3.对结果进行第二次的处理
        return new Promise((resolve) => {
            resolve(res + '222')
        })
    }).then((res) => {
        console.log(res, '第三层的10行处理代码');
    })



    上边代码的简写形式
    new Promise((resolve,reject) => {

        setTimeout(() => {
            resolve('aaa')
        },1000)
    }).then(res => {
        //1.自己处理10行代码
        console.log(res, '第一层的10行处理代码');

        //2.对结果进行第一次的处理
        return Promise.resolve(res + '111')
    }).then(res => {
        console.log(res, '第二层的10行处理代码');

        //3.对结果进行第二次的处理
        return Promise.resolve(res + '222')
    }).then((res) => {
        console.log(res, '第三层的10行处理代码');
    })



    //对上边代码的另一种简写形式
    new Promise((resolve,reject) => {

        setTimeout(() => {
            resolve('aaa')
        },1000)
    }).then(res => {
        //1.自己处理10行代码
        console.log(res, '第一层的10行处理代码');

        //2.对结果进行第一次的处理
        return res + '111'
    }).then(res => {
        console.log(res, '第二层的10行处理代码');

        //3.对结果进行第二次的处理
        return res + '222'
    }).then((res) => {
        console.log(res, '第三层的10行处理代码');
    })

</script>

</body>
</html>


五、Promise的all方法的使用


代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //需求：假设现在要做一个页面，必须同时向后台发送两次请求，并且当这两次请求都完成了，该页面才可以显示成功

    //使用原始的ajax来实现
    //定义两个变量用来记录请求完成的状态
    let isResult1 = false
    let isResult2 = false
    // 请求一：
    $ajax({
        url:'url1',
        success:function () {
            console.log('结果1');
            isResult1 = true
            //并不能确定两次请求谁先完成，所以每次请求里边都需要调用处理最终结果的方法
            handleResult()
        }
    })

    // 请求二：
    $ajax({
        url:'url2',
        success:function () {
            console.log('结果1');
            isResult2 = true
            //并不能确定两次请求谁先完成，所以每次请求里边都需要调用处理最终结果的方法
            handleResult()
        }
    })

    // 定义一个函数用来处理最终的结果
    function handleResult() {
        if(isResult1 && isResult2){
            //在这里处理最终结果
        }
    }


    //上面的方法有点繁琐，可以用Promise里边的all方法来替代
    //all里边传入的是一个数组
    Promise.all([
        //请求一：
        new Promise((resolve,reject) => {
            $ajax({
                url:'url1',
                success:function (data) {
                    resolve(data)
                }
            })
        }),

        //请求二：
        new Promise((resolve,reject) => {
            $ajax({
                url:'url2',
                success:function (data) {
                    resolve(data)
                }
            })
        })

    ]).then((results) => { //此处的results是一个数组，把两次请求的结果都封装到一个数组里边了
        console.log(results);
    })

</script>
</body>
</html>
liang__lei
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise:Python 中的超高性能 Promise 实现
05-30
承诺这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容安装 $ pip install promise用法下面的示例...
promise.pdf
05-30
promise学习笔记
Javascript Promise用法详解
10-18
JavaScript Promise 是一种处理异步操作的技术，它在ES6中被引入，旨在解决回调地狱问题，提供了一种更强大、规范化的异步编程解决方案。Promise 是一个代表了可能还未完成或已经完成的异步操作的对象，它有三种状态...
promise.md
06-03
promise.md记载了promise的规范 它是一套异步操作处理机制， [Promise A+](https://promisesaplus.com/) 是规范，jQuery、ES2015、q的promise都是对该规范的一种实现.
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
Android学习系列之gradle实战
07-23
Android学习系列之gradle实战
RFC 3261中文版技术文档
07-23
**标题与描述解析** 标题"RFC 3261 中文文档"指的是互联网请求评论（Request for Comments）3261的中文版本。RFC 3261是互联网工程任务组（IETF）发布的一个重要标准，它定义了SIP（Session Initiation Protocol，会话初始协议）的核心规范。SIP是一种用于建立、修改和终止多媒体通信会话的协议，广泛应用于VoIP（Voice over IP，IP语音）和统一通信系统中。 描述同样简洁明了，只强调了这是RFC 3261的中文翻译，意味着对于中文读者来说，这个文档提供了一个理解SIP协议的中文语言资源。 **标签解析** "RFC3261 中文"标签进一步确认了文档的内容，表明这是关于RFC 3261的中文资料，便于搜索和分类。 **压缩包子文件的文件名称列表** 文件名为"RFC3261 中文.mht"，这是一个单一网页文件，通常包含HTML、图像和其他资源，用于保存完整的网页内容。用户可以通过打开这个文件来查看RFC 3261的中文翻译。 **SIP协议详述** SIP协议是基于文本的，其设计类似于HTTP
嵌入式LinuxC语言程序设计基础教程第8章函数解读.doc
07-23
嵌入式
DirectShow滤镜：字幕叠加功能（含注解说明）
07-23
DirectShow Transform Filter最典型的例子，带注释，难度不大，学习必备 博客对应文章http://blog.csdn.net/leixiaohua1020/article/details/12498975。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
b069牙科就诊管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
牙科就诊管理系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。实现了用户在线查看数据。管理员管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等功能。牙科就诊管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 管理员在后台主要管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等。 牙医列表页面，此页面提供给管理员的功能有：查看牙医、新增牙医、修改牙医、删除牙医等。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。药品管理页面，此页面提供给管理员的功能有：新增药品,修改药品,删除药品。药品类型管理页面，此页面提供给管理员的功能有：新增药品类型,修改药品类型,删除药品类型。
2014年4月-2023年11月上市公司ESG数据（秩鼎）（月度数据）.xlsx
07-23
2014年4月-2023年上市公司秩鼎ESG评级数据 1、时间：2014年4月-2023年11月 2、来源:秩鼎数据 3、指标：证券代码、SC、评级日期、ESG评级、ESG等级、ESG得分、E评级、E等级、E得分、S评级、S等级、S得分、G评级、G等级、G得分、总市值(亿元)、流通市值(亿元)、市盈率(TTM)、ESG标准正态、E标准正态、S标准正态、G标准正态、三者标准差、证券简称、 4、范围：上市公司
Sequator执行文件
07-23
Sequator.exe。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
wireless.sh执行脚本
07-23
openwrt执行脚本配置网络
本文利用随机森林模型对房价数据进行预处理， 基于 XGBoost对房价进行预测；通过对比实验，发现优化后的 XGBoost模型在
07-23
1.本文首先对数据集进行了特征工程，根据相关性对部分特征进行了剔除。 其他的特征工程还包括分类变量的编码方式的探讨以及对连续变量的标准化。 2.随后对数据集做进一步处理，连续变量的缺失值以平均值填充，并进行标 准化；分类变量的缺失值以出现最多的类别等方式进行填充，使用 Ordinal Encoder 进行编码。使用 Random Forest Regressor 进行特征选择，输出特征重要 性，为 XGBoost模型的训练做准备。 3.使用 XGBoost 进行预测，数据选择之前使用随机森林输出的特征重要性的 前 30 作为特征变量；最后将问题转换为分类问题，预测房价的高和低。 本文做的比较好的方面在于对于过多的特征采取了使用随机森林模型进行 筛选，这使得后续使用 XGBoost 时训练时间大幅减小。在实际训练当中，使用 随机森林的效果明显好于 XGBoost，这是本文的一个缺陷。另一方面，直接将回 归任务转化为分类任务意义不大，如何评定该地的房价是高还是低是一件比较主 观的事情，不同的划分标准对于模型的表现具有很大的影响。
计算科学概论-平时作业
07-23
计算科学概论-平时作业
JavaScript Promise入门与实战指南
《JavaScript Promise迷你书》是一本由azu原著并由liubin、kaku和honnkyou翻译的中文版技术书籍，专注于JavaScript Promise的深入理解和实用应用。Promise是JavaScript语言中的一个重要概念，用于处理异步操作，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值