ES6 Promise 详解

news2024/12/28 4:31:05

目录

一、Promise基本介绍

二、Promise实现多次请求

        1.传统Ajax方式实现多次请求 : 

            1.1 json数据准备

            1.2 JQuery操作Ajax

        2.使用ES6新特性Promise方式 : 

三、Promise代码重排优化

        1.问题分析 : 

        2.代码优化 : 

            2.1 数据准备

            2.2 代码重排

一、Promise基本介绍

        (1) Ajax方式的异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，称为"Callback Hell" (回调地狱)。
        (2) Promise即是异步编程的一种解决方案，早在 ECMAScript 2015 (ES6) 中便成为标准。
        (3) 从语法层面讲，Promise是一个对象，用来获取异步操作的信息。

二、Promise实现多次请求

        1.传统Ajax方式实现多次请求 : 

            1.1 json数据准备

                通过student和student_detail_1两个json文件来简单模拟测试数据；第一次请求得到student.json中保存的数据，第二次请求通过前一次请求得到的数据，进一步得到student_detail_1.json中保存的数据（即先得到student.json中的id属性，根据该属性进一步得到student_detail_1.json中的更多属性）。 
                student.json代码如下 : 

{
  "id" : 1,
  "name" : "Cyan"
}

                student_detail_1.json代码如下 : 

{
  "id" : 1,
  "name" : "Cyan",
  "age" : 21,
  "score" : 450
}

            1.2 JQuery操作Ajax

                traditional_ajax.html代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Traditional Asynchronous</title>
    <!-- 此处的src使用了相对路径。 -->
    <script type="text/javascript" src="../script/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">
        /*
        PS : JQuery操作Ajax回顾 :
         $.ajax函数的常用参数如下———
            (1) url : 请求的地址
            (2) type : 请求的方式GET or POST
            (3) data : 发送到服务器端的数据，将自动转换为请求字符串格式
            (4) success : 成功的回调函数
            (5) dataType : 返回的数据类型，常用Json或text。
         */
        $.ajax({
            url:"../data/student.json",
            // type: ,
            // data: ,
            success:function (resultData) {
                console.log("The 1st request,and the student's basic information is :",resultData);
                //从第二次异步请求开始，已经出现了"ajax嵌套"
                $.ajax({
                    url:`../data/student_detail_${resultData.id}.json`,
                    success(resultData) {
                        console.log("The 2nd request,and the student's detailed information is :",resultData)
                    },
                    error(errInfo) {
                        console.log("Oh oh,Something bad happened:",errInfo);
                    }
                })
            },
            error(errInfo) {   //ES6新特性————对象的方法简写。
                console.log("Something bad happened:",errInfo);
            }
        })
    </script>
</head>
<body>

</body>
</html>

                运行结果 : 

        2.使用ES6新特性Promise方式 : 

                数据部分仍然使用data包下的student.json和student_detail_1.json。
                promise.html代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise Demonstration</title>
    <script type="text/javascript" src="../script/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">
        //1.首先请求data包下的student.json(需要创建一个Promise对象)
            //创建Promise对象时需要传入一个箭头函数
            //形参resolve表示请求成功的回调函数；形参reject表示请求失败的回调函数。
            //形参resolve和reject是约定俗成的，不固定，可以自由更改名称。
        let promise = new Promise((resolve,reject) => {
            //发出Ajax异步请求
            $.ajax({
                url:"../data/student.json",
                // type:
                // data:
                // dataType:
                success(resultData) {
                    console.log("Promise's 1st request,and the student's basic information is :",resultData);

                    //该方法将resultData参数传递到then()
                    resolve(resultData);
                },
                error(errInfo) {
                    // console.log("Promise's 1st request---Perhaps sth bad happened:",errInfo);

                    //使用ES6---Promise提供的catch机制来统一处理异常
                    reject(errInfo);
                }
            })
        })

        //2.第二次请求在这里执行！
        promise.then(resultData => {    //箭头函数形参的简写
            // 调用链, 通过return将Promise对象返回给下一个调用者。
            return new Promise((resolve, reject) => {
                $.ajax({
                    //url采用了模板字符串的形式
                    url:`../data/student_detail_${resultData.id}.json`,
                    success(resultData) {
                        console.log("Promise's 2nd request,and the student's detailed information is :",resultData);

                        /*
                            可以在第二次请求的success回调函数里，
                            继续使用resolve(resultData);发出第三次请求。
                         */
                        resolve(resultData);
                    },
                    error(errInfo) {
                        // console.log("Promise's 2nd request---Perhaps sth bad happened:",errInfo);
                        reject(errInfo);
                    }
                })
            })
        }).then(resultData => {
            /*
                (1)此处输出的resultData,来自第二次Ajax请求的success中的"resolve(resultData);"
                (2)可以在这个then方法中，继续通过
                    "return new Promise((resolve, reject) => { $.ajax({}) })"
                    的方式来发出第三次Ajax异步请求。
                (3)第三次Ajax异步请求，是基于第二次Ajax请求获取的数据resultData。
             */
            console.log("After 2nd request, THE resultData =",resultData);
        }).catch(errInfo => {
            console.log("U~  Promise's request---Perhaps sth bad happened:",errInfo);
        })
    </script>
</head>
<body>

</body>
</html>

                运行结果 ：

三、Promise代码重排优化

        1.问题分析 : 

        使用Primise方式代替传统Ajax方式发送多次异步请求之后，以“链式调用”代替了“嵌套调用”，可读性提升。

        但仍然存在“代码臃肿”，“代码重复度高”的特点；因此，可以通过代码重排进行优化。

        2.代码优化 : 

            2.1 数据准备

                在data包下新建一个json文件，用来模拟student1的监护人的数据。
                custodian_1.json代码如下 : 

{
  "id" : 1,
  "phonetic" : "/kʌˈstoʊdiən/",
  "father": "f1",
  "mother": "m1",
  "telephone": 5204505
}

            2.2 代码重排

                promise_EX.html代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To Optimize Promise</title>
    <script type="text/javascript" src="../script/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">
        /**
         * @function 将多次请求相似的代码封装到一个方法中
         * @param url : 请求的资源
         * @param data : 请求时携带的数据
         * @returns {Promise<unknown>}
         */
        function getRequest(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url:url,
                    data:data,
                    success(resultData) {
                        resolve(resultData);
                    },
                    error(err) {
                        reject(err);
                    }
                })
            })
        }

        //1.第一次请求 --- 得到student.json中保存的数据
        getRequest("../data/student.json").then(resultData => {
            console.log("student =", resultData);

            //2.第二次请求 --- 得到student_detail_1.json中保存的数据
            return getRequest(`../data/student_detail_${resultData.id}.json`).then(resultData => {
                console.log("student_1 =", resultData);

                //3.第三次请求 --- 得到custodian_1.json中保存的数据
                return getRequest(`../data/custodian_${resultData.id}.json`).then(resultData => {
                    console.log("custodian_1 =",resultData);
                })
            })
        }).catch(err => {
            console.log("Perhaps something bad happened:",err);
        })
    </script>
</head>
<body>
</body>
</html>

                运行结果 : 

        System.out.println("END------------------------------------------------------------");

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

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

相关文章

四川农业大学就业指南←缺失的就业指导课

四川农业大学就业指南←缺失的就业指导课

推荐 125页就业指南&#xff0c; 包含就业去向、就业政策介绍&#xff0c; 也有毕业生常见问题&#xff0c; 就业协议与劳动合同的阐释&#xff0c; 帮助毕业生系统梳理庞杂的各类就业信息&#xff0c; 人文温度冲淡就业惨淡的灰冷阴霾。 有这样一群人&#xff0c;在2023&…
阅读更多...
联邦学习的梯度重构

联邦学习的梯度重构

梯度泄露的攻击方法&#xff1a;深度泄露梯度&#xff08;DLG&#xff09;——>在高度压缩的场景下是失效的 原因&#xff1a;梯度压缩&#xff08;可减小通信开销&#xff09;——>存在信息损失<——从而DLG方法效果有限 但是这本身存在的信息损失怎么解决呢&#x…
阅读更多...
前端刷题 | 网站

前端刷题 | 网站

W3Cschoolhttps://www.w3cschool.cn/exam 计算机方面的知识涵盖较全 牛客网 应届生招聘题库&#xff0c;校招实习笔试面试真题 力扣 前端方面的题目较为基础&#xff0c;基本不考复杂算法题 稀土掘金https://juejin.cn/search?query%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95&a…
阅读更多...
基因表达分析聚类分析

基因表达分析聚类分析

基因表达分析聚类&分析 1. Introduction to gene expression analysis Technology: microarrays vs. RNAseq. Resulting data matricesSupervised (Clustering) vs. unsupervised (classification) learning 微阵列技术&#xff1a; 制备DNA探针阵列并进行互补性杂交。 …
阅读更多...
(2)Nmap

(2)Nmap

笔记目录 渗透测试工具(1)wireshark 渗透测试工具(2)Nmap渗透测试工具(3)Burpsuite 1.工具简介 (1)定义 ①功能 网络扫描和嗅探工具包&#xff0c;三个主要基本功能&#xff1a; 探测一组主机是否在线 扫描主机端口、嗅探所提供的网络服务 推断出主机所用的操作系统 ②namp …
阅读更多...
配置Linux

配置Linux

首先安装VMware&#xff1a; 安装说明&#xff1a;&#xff08;含许可证的key&#xff09; https://mp.weixin.qq.com/s/XE-BmeKHlhfiRA1bkNHTtg 给大家提供了VMware Workstation Pro16&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1q8VE3TkPzDnM3u9bkTdA_g 提取码&…
阅读更多...
【【萌新的FPGA学习之快速回顾 水 水 】】

【【萌新的FPGA学习之快速回顾 水 水 】】

萌新的FPGA学习之快速回顾 水 水 上一条FPGA的更新在9 25 并且2个礼拜没写 verilog 了 正好 刷新一下记忆 FPGA CPU DSP 的对比 在数字电路发展多年以来&#xff0c;出现了 CPU、DSP 和 FPGA 三种经典器件&#xff0c;每个都是具有划时代意义的器件。CPU、DSP 和 FPGA 都有各…
阅读更多...
[SQL开发笔记]在windows系统安装Postgres

[SQL开发笔记]在windows系统安装Postgres

一、软件简介 PostgreSQL是一种自由软件的对象-关系型数据库管理系统&#xff08;ORDBMS&#xff09;&#xff0c;它以加州大学计算机系开发的POSTGRES&#xff0c;4.2版本为基础。PostgreSQL支持大部分的SQL标准并且提供了很多其他现代特性&#xff0c;如复杂查询、外键、触发…
阅读更多...
5G来临，迎客莱带你探索运营商大数据的应用

5G来临，迎客莱带你探索运营商大数据的应用

随着5G时代的来临&#xff0c;不仅在算力的基础上得到了加强和保障&#xff0c;同时也丰富了计算的方式和模式&#xff0c;如边缘计算、霾计算等。计算方式和模式的改变&#xff0c;对于运营商来说&#xff0c;意味着更丰富的数据维度&#xff0c;更鲜活的数据和更强大的数据处…
阅读更多...
1021 个位数统计

1021 个位数统计

#include<bits/stdc.h> using namespace std; map<int,int>mp; int main(){string str;cin>>str;for(auto t:str){int kt-0;mp[k];}for(auto t:mp){cout<<t.first<<":"<<t.second<<endl;} }
阅读更多...
find_element_by_id()方法的使用上。这个方法已经被弃用，建议使用find_element()方法替代。

find_element_by_id()方法的使用上。这个方法已经被弃用，建议使用find_element()方法替代。

from selenium import webdriver path chromedriver.exe browser webdriver.Chrome(path) url https://www.baidu.com browser.get(url) button browser.find_element_by_id(su) print(button) 修改后代码 from selenium import webdriver path chromedriver.exe browse…
阅读更多...
国密https访问

国密https访问

前言 现在的SSL的加密算法实际上主要是国际算法&#xff0c;包括JDK&#xff0c;Go等语言也仅支持国际算法加密&#xff08;毕竟是国外开源项目&#xff09;&#xff0c;hash。随着国密算法的普及&#xff0c;比如openssl就支持国密了&#xff0c;还要新版本的Linux内核也开始…
阅读更多...
识别准确率竟如此高，实时语音识别服务

识别准确率竟如此高，实时语音识别服务

前言 本文将介绍一个准确率非常高的语音识别框架&#xff0c;那就是FunASR&#xff0c;这个框架的模型训练数据超过几万个小时&#xff0c;经过测试&#xff0c;准确率非常高。本文将介绍如何启动WebSocket服务和Android调用这个服务来实时识别&#xff0c;一边说话一边出结果…
阅读更多...
2.卷积神经网络(CNN)

2.卷积神经网络(CNN)

一句话引入&#xff1a; 如果我们要做图像识别&#xff0c;用的是一个200x200的图片&#xff0c;那么BP神经网络的输入层就需要40000个神经元&#xff0c;因为是全连接&#xff0c;所以整个BP神经网络的参数量就是160亿个&#xff0c;显然不能这样来训练网络&#xff0c;所以我…
阅读更多...
【RNA structures】RNA转录的重构和前沿测序技术

【RNA structures】RNA转录的重构和前沿测序技术

文章目录 RNA转录重建1 先简单介绍一下测序相关技术2 Map to Genome Methods2.1 Step1 Mapping reads to the genome2.2 Step2 Deal with spliced reads2.3 Step 3 Resolve individual transcripts and their expression levels 3 Align-de-novo approaches3.1 Step 1: Generat…
阅读更多...
MySQL——八、MySQL索引视图

MySQL——八、MySQL索引视图

MySQL 一、视图1、什么是视图2、为什么需要视图3、视图的作用和优点4、创建视图5、视图使用规则6、修改视图7、删除视图 二、索引1、什么是索引2、索引优缺点3、索引分类4、索引的设计原则5、创建索引5.1 创建表是创建索引5.2 create index5.3 ALTER TABLE 6、删除索引7、MySQL…
阅读更多...
英语——歌诀篇——歌诀记忆法

英语——歌诀篇——歌诀记忆法

介词用法速记歌 年月季前要用in&#xff0c; 日子前面却不行。 遇到几号要用on&#xff0c; 上午下午又用in。 要说某时上下午&#xff0c; 用on换in才可行。 午夜黄昏和黎明&#xff0c; 要用at不用in。 差儿分到几点&#xff0c; 写个“to”在中间。 若是几点过几分&#xf…
阅读更多...
操作系统【OS】进程的通信

操作系统【OS】进程的通信

共享存储 各个进程对共享空间的访问应该是互斥的&#xff08;可以使用P、V操作&#xff09;低级通信 基于数据结构的共享速度慢、限制多高级通信 基于存储区的共享数据的形式、存放的位置由通信进程控制速度快 消息传递 进程间的数据交换以格式化的消息为单位 消息头&#…
阅读更多...
《windows核心编程》第2章 UNICODE字符

《windows核心编程》第2章 UNICODE字符

一、基础内容 1.1 UNICODE和UTF-8 下面是我个人的理解 UNICODE用2个字节来代表一个字符 UTF-8用1-4个字节来表示一个字符。可变长度的实现原理是ASCII字符只有7位&#xff0c;首位如果是1表示不是ASCII&#xff0c;说明这个字符和后面的字符联合起来形成新字符。 1.2 字符的…
阅读更多...
【经历】跨境电商公司目前已在职近2年-＞丰富且珍贵

【经历】跨境电商公司目前已在职近2年-＞丰富且珍贵

我入职了跨境电商公司 *背景 上篇说我在2021-11月离职了&#xff0c;交接期间已经拿到了新公司的offer&#xff0c;然后因上家公司项目交接时间比较长(原因在上篇)&#xff0c;导致新公司这边延迟了两次入职的时间&#xff0c;最后结果是直接无缝衔接了新公司&#xff08;周五…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023