为什么需要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）.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中的Streaming编程。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.好了，那时候的三个返回值案例就到这里了。catchcatch主要用来处理异常，有两种情况会进入catch：Promise执行时，通过reject返回数据。如果then中抛出的错误有问题，则由最新的catch来处理。在finally的最后，终于有一个finally用来覆盖底线。这个设置感觉有点像我们Java中的try-catch-finally，就是无论如何都会执行finally中的代码。但是，与Java中的finally不同，Promise中的finally可以在最后执行完成后继续then。..前端的蜜汁操作。其他方法最后，让我们看看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（价值）;}）;复制代码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);})这个用法比较简单，还有一些其他的方法我就不一一列举了。源码附件已经打包上传到百度云，大家可以自行下载~链接：https://pan.baidu.com/s/14G-b...提取码：yu27百度云链接不稳定，随时可能坏掉无效，请抓紧保存。如果百度云链接失效请留言告诉我，我看到后会及时更新~开源地址码云地址：https://gitee.com/ZhongBangKe...Github地址：https:///gitee.com/众帮客...
