最近在录 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) {