写给 Java 程序员的前端 Promise 教程,你学会了吗?

本文面向Java程序员,深入浅出地介绍了前端Promise的概念和使用,包括为什么需要Promise、Promise的基本用法、then、catch、finally以及Promise.all()、Promise.race()等方法,帮助开发者理解并解决异步编程中的回调地狱问题。
摘要由CSDN通过智能技术生成

最近在录 TienChin 项目,用的 RuoYi-Vue 脚手架,前端关于网络请求的地方,很多都涉及到了 Promise,为了让小伙伴们能更好的理解前端代码,咱们抽空整一篇文章和大家聊聊整个 Promise。

1. 为什么需要 Promise

假设我现在有这样一个需求,用户先去登录,登录成功之后,再去服务端获取用户信息,获取到用户信息之后再去服务端获取前端的动态菜单。一般我们的 Ajax 请求都是异步形式,为了确保上一步操作成功再执行下一个请求,所以最终发出的请求伪代码类似下面这样:

$.ajax({
    url:'/login',
    data:loginForm,
    success: function (data) {
        //登录成功
        $.ajax({
            url:'/getInfo',
            success: function (userInfo) {
                //获取用户信息成功
                $.ajax({
                    url: '/getMenus',
                    success: function (menus) {
                        //获取菜单成功
                    }
                })
            }
        })
    }
})

为了确保一个异步任务执行完成后,再执行下一个异步任务,我们不得不在回调函数中不停的写下去,上面我举的例子是三个请求嵌套,实际上可能会更多。。。这就是前端所谓的回调地狱。而 Promise 就是来解决回调地狱的。

2. Promise

Promise 从字面上理解,就是承诺,承诺将来在某一个时间会做某一件事。通过 Promise 我们可以将异步任务执行的代码和处理的代码完全分离开。

还是第一小节这个例子,如果我们用 Promise 写,那么方式如下:

function login(resolve, reject) {
    setTimeout(() => {
        let number = Math.random();
        if (number > 0.5) {
            resolve("login success")
        } else {
            reject("login failed")
        }
    }, 2000);
}
function getInfo(resolve, reject) {
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值