【Java前端技术栈】Promise

于 2024-02-19 14:05:51 发布
阅读量862 收藏 7
点赞数 6
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41891655/article/details/136150053
版权

一、Promise 基本介绍

1. 传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的Callback Hell

2. 为了解决上述的问题，Promise对象应运而生，在 EMCAScript 2015当中已经成为标准

3. Promise 是异步编程的一种解决方案。

4. 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

5. Promise 也是 ES6 的新特性，因为比较重要

6. 一句话: Promise 是异步编程的一种解决方案, 可以解决传统 Ajax 回调函数嵌套问题

二、promise实例

jquery ajax的嵌套示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery和ajax多次请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js">
    </script>
    <script type="text/javascript">
        $.ajax({
            url: "data/monster.json",
            success(resultData) {//如果请求成功了，回调处理函数success
                console.log("第1次ajax请求 monster基本信息=", resultData);
                //发出第二次ajax请求
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,
                    //下面是es6对象的方法简写形式
                    success(resultData) {
                        console.log("第2次ajax请求 monster详细信息=", resultData);

                        //$.ajax => callback hell
                        //$.ajax
                        //$.ajax
                    },
                    error(err) { //出错的回调函数
                        console.log("出现异常=", err);
                    }

                })
            },
            error(err) {
                console.log("出现异常=", err);
            }
        })
    </script>
</head>
<body>

</body>
</html>

使用promise完成多次请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用promise完成多次ajax请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        //先请求到monster.json
        //1. 创建Promise对象
        //2. 构造函数传入一个箭头函数
        //3. (resolve, reject) 参数列表resolve: 如果请求成功, 调用resolve函数
        //4. 如果请求失败, 调用reject函数
        //5. 箭头函数体, 仍然是通过jquery发出ajax
        let p = new Promise((resolve, reject) => {
            //发出ajax
            $.ajax({
                url: "data/monster.json",
                success(resultData) {//成功的回调函数
                    console.log("promise发出的第1次ajax monster基本信息=", resultData);
                    resolve(resultData);//p.thend的前置
                },
                error(err) {
                    //console.log("promise 1发出的异步请求异常=", err);
                    reject(err);
                }
            })
        })

        //这里我们可以继续编写请求成功后的业务
        p.then((resultData) => {
            //这里我们可以继续发出请求
            console.log("p.then 得到 resultData", resultData);
            return new Promise((resolve, reject) => {
                console.log(`data/monster_detail_${resultData.id}.json`),
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,

                    success(resultData) { //第2次ajax请求成功,回调函数
                        console.log("第2次ajax请求 monster的详细信息=", resultData);
                        //继续进行下一次的请求
                        resolve(resultData);
                    },
                    error(err) { //第2次ajax请求失败,回调函数
                        //console.log("promise2 发出的异步请求异常=", err);
                        reject(err);
                    }
                })
            })
        }).then((resultData) => {

            console.log("p.then().then(), resultData", resultData)
            //即可以在这里发出第3次ajax请求=》 获取该妖怪的女友
            return new Promise((resolve, reject) => {
                $.ajax({
                    // url: `data/monster_gf_${resultData.gfid}.json`,

                    success(resultData) { //第3次ajax请求成功,回调函数
                        console.log("第3次ajax请求 monster女友的详细信息=", resultData);
                        //继续进行下一次的请求
                        //resolve(resultData);
                    },
                    error(err) { //第2次ajax请求失败,回调函数
                        //console.log("promise2 发出的异步请求异常=", err);
                        //reject(err);
                    }
                })
            })

        }).catch((err) => { //这里可以对多次ajax请求的异常进行处理
            console.log("promise异步请求异常=", err);
        })
    </script>
</head>
<body>

</body>
</html>

promise代码重排

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise代码重排</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        /**
         * 这里我们将重复的代码，抽出来,编写一个方法get
         *
         * @param url ajax请求的资源
         * @param data ajax请求携带的数据
         * @returns {Promise<unknown>}
         */
        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                        url: url,
                        data: data,
                        success(resultData) {
                            resolve(resultData);
                        },
                        error(err) {
                            reject(err);
                        }
                    }
                )
            })
        }

        //需求: 完成
        //1. 先获取monster.json
        //2. 获取monster_detail_1.json
        //2. 获取monster_gf_2.json
        get("data/monster.json").then((resultData) => {
            //第1次ajax请求成功后的处理代码
            console.log("第1次ajax请求返回数据=", resultData);
            return get(`data/monster_detail_${resultData.id}.json`);

        }).then((resultData) => {
            //第2次ajax请求成功后的处理代码
            console.log("第2次ajax请求返回数据=", resultData);
            //return get(`data/monster_detail_${resultData.id}.json`);
            return get(`data/monster_gf_${resultData.gfid}.json`);
        }).then((resultData) => {
            //第3次ajax请求成功后的处理代码
            console.log("第3次ajax请求返回数据=", resultData);
            //继续..
        }).catch((err) => {
            console.log("promise请求异常=", err);
        })

    </script>
</head>
<body>

</body>
</html>

课后作业 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //思路
        $.ajax({
            url: "data/student_100.json",
            success(data) {
                console.log("第一次ajax请求数据=", data);
                $.ajax({
                    url: `data/class_${data.class_id}.json`,
                    success(data) {
                        console.log("第2次ajax请求数据=", data);
                        $.ajax({
                            url: `data/school_${data.school_id}.json`,
                            success(data) {
                                console.log("第3次ajax请求数据=", data);
                            },
                            error(err) {
                                console.log("ajax请求发生异常:", err)
                            }
                        })
                    },
                    error(err) {
                        console.log("ajax请求发生异常:", err)
                    }
                })
            },
            error(err) {
                console.log("ajax请求发生异常:", err)
            }

        })
    </script>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise代码重排完成多次ajax请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="script/promise_utils.js"></script>
    <script type="text/javascript">
        //promise代码重排，完成多次ajax请求
        get("data/student_100.json").then(data => {
            console.log("第1次ajax请求, 返回的数据=", data);
            return get(`data/class_${data.class_id}.json`);
        }).then(data => {
            console.log("第2次ajax请求, 返回的数据=", data);
            return get(`data/school_${data.school_id}.json`);
        }).then(data => {
            console.log("第3次ajax请求, 返回的数据=", data);
        }).catch(err => {
            console.log("promise异步请求异常=", err);
        })

    </script>
</head>
<body>

</body>
</html>

yinhai1114
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
java promise实现_基于JAVA的Promise模式实现
weixin_33365844的博客
02-16 4108
Promise模式是一种异步编程模式，即我们可以先开始一个任务，拿到这个任务的凭据而并不需要立即得到这个任务的执行结果才继续往下执行，我们拿着这个凭证可以在之后任何需要的时候去兑换结果。这篇文章主要介绍一种基于JAVA的Promise模式实现并结合一些例子。原始实现为了能够让大家对这个模式有个印象，我举个简单点的例子，假如我们正在做百度百科这个页面，我们需要给前端提供一个服务(下面的代码我们将结果...
java promise实现,Promise详解
weixin_39576751的博客
03-13 1342
二、使用promises1、错误捕获如果在执行器内部抛出了错误，那么 Promise 的拒绝处理函数就会被调用。例如：let promise = new Promise(function(resolve, reject) {throw new Error("Explosion!");});promise.catch(function(error) {console.log(error.messag...
Java多线程编程模式实战指南之Promise模式
weixin_33690963的博客
12-10 174
编者按：InfoQ开设新栏目“品味书香”，精选技术书籍的精彩章节，以及分享看完书留下的思考和收获，欢迎大家关注。本文节选自黄文海著《Java多线程编程实战指南（设计模式篇）》中第6章，介绍了Java中Promise模式的用法和实例。\\本书其它部分内容也在本站发表过，详见：\\Java多线程编程模式实战指南一：Active Object模式（上）\\tJava多线程编程模式实战指南一：Active...
java 实现 Promise
小小程序员的博客
08-12 1328
JAVA 实现 Promise
Java异步编程框架之Promise介绍
03-12
Java异步编程框架Promise的介绍，对于理解java异步编程有哦帮助。
写给 Java 程序员的前端 Promise 教程
江南一点雨的专栏
08-08 4268
我们在 Promise 中写异步任务执行的代码，在上面的案例中，松哥通过 setTImeout 方法模拟了一个耗时操作，异步任务执行完毕后，我们调用 resolve 方法返回调用的结果（会进入到下一步的 then 中），也可以调用 reject 方法表示调用失败（会进入到 catch 中）。这就是前端所谓的回调地狱。就说一句，如果 then 中返回的是一个 Promise 对象，那么接下来的 then 其实是这个 Promise 对象的 then，而不是一开始的 Promise 的 then 了。...
写给 Java 程序员的前端 Promise 教程，你学会了吗？
m0_73257876的博客
08-12 118
我们在 Promise 中写异步任务执行的代码，在上面的案例中，松哥通过 setTImeout 方法模拟了一个耗时操作，异步任务执行完毕后，我们调用 resolve 方法返回调用的结果（会进入到下一步的 then 中），也可以调用 reject 方法表示调用失败（会进入到 catch 中）。这就是前端所谓的回调地狱。就说一句，如果 then 中返回的是一个 Promise 对象，那么接下来的 then 其实是这个 Promise 对象的 then，而不是一开始的 Promise 的 then 了。...
【前端】一文彻底学会Promise
weixin_44433834的博客
01-13 359
作者：D827 来源：恒生LIGHT云社区 没有一个功能是看了源码后，还不会用的。所以看完本篇文章，希望能帮助你彻底掌握Promise。 Promise的介绍 Promise对象是ES6提供的实现异步的一个解决方案，它使得异步方法可以像同步方法那样返回值。 promise是一个构造函数，包裹（封装）一个异步函数(ajax;定时器；数据库读取；fs文件读取)，当然它也可以包裹一个非异步函数。入参为两个函数：resolve、reject。成功调用resolve，并传递参数，失败调用reject，并传递参数。.
分布式电商项目十三：项目需要用到的前端技术栈
LastYHM的博客
05-31 1673
因为我们要完成一个完整的项目，不可避免的需要用到前端技术，本章先介绍一下次项目中会使用到的前端技术，由于前端技术不是我们的核心内容，技术的使用会尽可能的简单一些。
基于Java web的物业管理系统 采用的技术栈：spring+mybaits+axios+vue
04-30
【标题】：“基于Java web的物业管理系统”是一个利用现代技术栈构建的企业级应用，它集成了Spring、MyBatis和前端的Axios与Vue.js框架。这个系统旨在为物业管理和居民服务提供高效、便捷的数字化解决方案。 【描述...
promise:Promise-在Java中以同步的方式异步编程
04-27
java promise（）是Promise A+规范的java实现版本。Promise A+是commonJs规范提出的一种异步编程解决方案，比传统的解决方案—回调函数和事件—更合理和更强大。promise实现了Promise A+规范，包装了java中对多线程的操作，提供统一的接口，使得控制异步操作更加容易。实现过程中参考文档如下： 基本使用：修改pom.xml <repositories> <repository> <id>wjj-maven-repo</id> <url>https://raw.github.com/zhanyingf15/maven-repo/master</url> </repository> </repositories> <dependency> <groupId>com.wjj</groupId> <arti
promiser-java:Java中Promise的轻量级实现
05-02
Promiser的Java 规范的轻量级实现，灵感来自JavaScript。 要求 该库是使用Java 8语法编写的。 让我们拥抱未来！ :grinning_face_with_smiling_eyes: 要使用此到Java 7，6个5个项目，不要忘记安装由 。 用法 您可以这样创建Promiser <T>对象： Promiser< T> p = new Promiser< T> (( Resolver< T> resolve, Rejecter< U> reject) - > { // Place your asynchronous process here, and make sure // to trigger resolve.run() or reject.run() when needed. }); <T>是成功的情况下返回的结果的类型， <U>是错误的情况下返回的结果的类型。 您现在可以处理
Java实现Promise.all()的示例代码
08-27
主要介绍了Java实现Promise.all()的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
pnky-promise:Java 中的 Promise
06-03
承诺 类是承诺或期货框架的自定义实现。 它提供了处理短异步任务的能力，通过自定义处理成功或失败的操作，一个接一个地链接操作。 除了接口上提供的用于侦听任务结果的方法之外， 实现还提供了一些实用程序来启动一个将在执行器上运行的进程并返回一个未来，您可以使用它在完成时开始侦听结果. PnkyPromise框架源于对 Guava 的ListenableFuture和 Java 8 的CompletableFuture类中缺乏的功能的需求。 请参阅有关的JavaDoc 并在实用方法有关功能的更多信息。 另请参阅的示例用法。
前端面试题 java面试题
04-15
在IT行业中，前端和Java是两个非常重要的领域，它们各自有着独特的技术和理论体系。下面将分别探讨这两个领域的面试重点，并结合文件名称中的内容，提供一些可能的面试知识点。 ### 前端面试题 前端开发主要关注...
2018年最新BAT面试题（前端，java，Python）
12-24
以下是对2018年最新BAT面试题中涉及的前端、Java和Python知识点的详细解析： **前端部分** 前端开发是构建Web应用的重要组成部分，主要关注用户交互和视觉呈现。2018年的面试题可能包括以下知识点： 1. **...
整理最近自己前端和JAVA开发笔试题中的知识点（公司面试）.zip
最新发布
10-03
在本压缩包“整理最近自己...通过学习和掌握这些知识点，无论是前端还是Java开发者，都能在面试中展现出扎实的技术功底，增加被录用的可能性。持续学习和实践是提升技术能力的关键，希望这份资料能为你的职业发展助力。
future promise java_Promise模式简介(Future) --- Java实现异步
weixin_29313239的博客
02-12 244
Promise模式简介Promise模式是一种异步编程模式 。它使得我们可以先开始一个任务的执行，并得到一个用于获取该任务执行结果的凭据对象，而不必等待该任务执行完毕就可以继续执行其他操作。等到我们需要该任务的执行结果时，再调用凭据对象的相关方法来获取。这样就避免了不必要的等待，增加了系统的并发性。这好比我们去小吃店，同时点了鸭血粉丝汤和生煎包。当我们点餐付完款后，我们拿到手的其实只是一张可借以换...
java promise实现,[Java教程]promise的理解和应用
weixin_34486987的博客
03-19 772
[Java教程]promise的理解和应用02018-09-04 20:00:28老铁们，我又满血复活了，今天我准备来吹一波我对promise，如有错吴请直接指出，明白了吗？话不多说开始吧首先我们需要知道啥叫promise，我问了问大佬，他说这个东西是 异步操作的同步代码(but有兼容问题).下面我来说说我自己对他的理解：这个小东西吧还是挺可爱的，来，我们了解了解他1.它是一个构造函数，使用的时候...
2023年全面Java入门到精通151G教程视频及微服务、前端技术详解
4. **前端技术栈**：涉及ES6新特性、Promise与模块化编程，以及Vue框架和Axios的使用。 5. **框架技术**：涵盖了Spring全家桶（Spring和SpringMVC）、MyBatis和SSM等主流Java开发框架，帮助开发者熟悉企业级应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yinhai1114

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值