Promise字面意思是承诺，承诺在未来的某个时间做某件事。通过Promise，我们可以将异步任务执行的代码和处理的代码完全分离。朋友知道宋哥最近在录制TienChin项目，使用的是RuoYi-Vue脚手架，很多前端网络请求都涉及到Promise。这篇文章和你聊聊整个Promise。为什么需要Promise假设我现在有这样一个需求，用户先登录，登录成功后，再去服务器获取用户信息，获取用户信息后，再去服务器获取前端动态菜单。一般我们的ajax请求都是异步的。为了保证上一步成功再执行下一个请求，最终请求的伪代码类似如下：$.ajax({url:'/login',data:loginForm,success:function(data){//登录成功$.ajax({url:'/getInfo',success:function(userInfo){//获取用户信息成功$.ajax({url:'/getMenus',success:function(menus){//获取菜单成功}})}})}})为了保证在执行下一个异步任务之前先执行一个异步任务，我们要在回调函数中不停的写，我上面举的例子是嵌套了三个请求，实际上可能会有更多。..这就是所谓的前端回调地狱。而Promise就是为了解决回调地狱。PromisePromise字面意思是承诺，承诺在未来的某个时间做某件事情。通过Promise，我们可以将异步任务执行的代码和处理的代码完全分离。还是第一节的例子，如果我们用Promise来写，那么方法如下：functionlogin(resolve,reject){setTimeout(()=>{letnumber=Math.random();if(number>0.5){resolve("登录成功")}else{reject("登录失败")}},2000);}functiongetInfo(resolve,reject){setTimeout(()=>{letnumber=Math.random();if(number>0.5){resolve("getInfosuccess")}else{reject("getInfofailed")}},2000);}functiongetMenus(resolve,reject){setTimeout(()=>{让数字=Math.random();if(number>0.5){resolve("getMenussuccess")}else{reject("getMenusfailed")}},2000);}newPromise(login).then(data=>{控制台.log("login:",data);returnnewPromise(getInfo);}).then(data=>{console.log("get信息:",数据);返回新的承诺(getMenus);}).then(data=>{console.log("getMenus",data);}).catch(err=>{console.log("err:",err);})我们在Promise中编写了异步任务执行的代码，在上面的案例中，松哥通过setTImeout方法模拟了一个耗时操作，异步任务执行完成后，我们调用resolve方法返回调用的结果（会进入then的下一步），或者调用reject方法表示调用失败（会进入catch）3.then中的返回值分为三种情况。3.1普通returnthen方法的参数是最后一个Promise对象resolve的值，一个Promise对象可以有多个then，比如上面案例中的login函数，我们可以一直进行then：functionlogin(resolve,reject){setTimeout(()=>{letnumber=Math.random();if(number>0.5){resolve("登录成功")}else{reject("登录失败")}},2000);}new承诺（登录）。然后（数据=>{console.log（“then1：”，数据）；返回数据；}）。then（数据=>{console.log（“then2：”，数据）；返回数据；}）。然后（data=>{console.log("then3:",data);}).catch(err=>{console.log("err:",err);})总是可以这样返回，有点就像我们的Java流式编程。3.2抛出异常然后我们就可以判断返回结果，不满足条件就直接抛出异常，进入就近的catch代码块。下面的例子：functionlogin(resolve,reject){setTimeout(()=>{letnumber=Math.random();if(number>0.5){resolve("loginsuccess")}else{reject("loginfailed")}},2000);}newPromise(login).then(data=>{console.log("then1:",data);thrownewError("Somethingwentwrong");}).then(data=>{console.log("then2:",data);返回数据;}).then(data=>{console.log("then3:",data);}).catch(err=>{console.log("err:",err);})和上面的代码一样，如果进入第一个then，第一个then直接抛出异常，所以直接进入catch，后面的then不会执行。3.3返回Promise第三种情况是then也可以返回一个Promise对象，和我们第二节的情况一样，这里不再赘述。说白了，如果then中返回了一个Promise对象，那么接下来的then其实就是Promise对象的then，而不是原来Promise的then。比如下面的伪代码：A.then((data)=>{returnB}).then(xxx)假设A和B都是Promise对象，那么第二个then方法就是B的then，嗯，就是这样对于当时的三个返回值案例。4.catchcatch主要用来处理异常。有两种情况会进入catch：Promise执行时，会通过reject返回数据。如果then中抛出的错误有问题，则由最新的catch来处理。5.最后有个finally来覆盖底线。这个设置感觉有点像我们Java中的try-catch-finally，就是无论如何都会执行finally中的代码。但是，与Java中的finally不同，Promise中的finally可以在最后执行完成后继续then。..前端的蜜汁操作。6.其他方法最后，我们来看一下Promise中的其他静态方法。6.1Promise.all()Promise.all()方法可以接收多个Promise对象，只返回一个Promise实例。这个方法会等到所有输入的Promise对象的resolve方法返回，或者当所有输入的Promise对象都被拒绝时，所有的执行都会结束。让我们看看下面的例子：constpromise1=Promise.resolve(3);constpromise2=42;constpromise3=newPromise((resolve,reject)=>{setTimeout(resolve,3000,'foo');});Promise.all([promise1,promise2,promise3]).then((values)=>{控制台.log(values);}).catch(err=>{console.log("err",err);})当promise1,promise2,promise3都执行resolve时，就会进入then，如果这三个中的任何一个执行reject，就会进入catch。6.2Promise.race()Promise.race()方法可以接收多个Promise对象。一旦迭代器中的Promiseresolve或rejects，返回的Promise将resolve或reject。与all方法的区别在于，谁执行race方法快，谁就用结果。让我们看看下面这段代码：constpromise1=newPromise((resolve,reject)=>{setTimeout(resolve,500,'one');});constpromise2=newPromise((resolve,reject)=>{setTimeout(reject,600,'two');});Promise.race([promise1,promise2]).then((value)=>{console.log(value);});promise1执行时间短，promise2执行时间长，所以最后的结果就是promise1的结果。6.3Promise.reject()Promise.reject()方法返回一个带有拒绝原因的Promise对象。看下面这段代码：).抓住（拒绝）；这样执行的时候就会进入catch。6.4Promise.resolve()Promise.resolve(value)方法返回一个用给定值解析的Promise对象。constpromise1=Promise.resolve(3);promise1.then(data=>{console.log("data",data);},err=>{console.log("err",err);})这个用法比较简单，没什么好说的。还有一些方法我就不一一列举了。有兴趣的朋友可以看看MDN上的相关解释：https://developer.mozilla.org...。好了，明白了这个东西，我们再看看TienChin项目的前端，会很轻松！
