什么是promise

具备以下两种特点

promise有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)

一旦状态改变,就不会再变,任何时候都可以得到这个结果。

基础用法:

javascript 复制代码
new Promise(function(succ,fail){
    let res=Math.random()
    if(res>0.5){
        succ(res)//成功返回
    }else{
        fail(res)//失败返回
    }
})
.then(function(res){
    console.log("成功返回结果:"+res);
},function(res){
    console.log("失败返回结果:"+res);
})
.catch(function(err) {
    console.log("统一异常处理:"+err);  
})
//结果:
//失败返回结果:0.3700134152652388
//成功返回结果:0.8785768247854773

首先说明一个地方:Promise一旦新建它就会立即执行,无法中途取消。

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve(成功回调方法)reject(失败回调方法)

在传入promise的方法中,你需要告诉他这次的处理结果状态,也就是代码中的succ和fail方法,这分别会把promise的状态变成

succ:Pending-》Resolved

fail:Pending-》Rejected

然后调用了succ或fail方法后,就会对应进入then方法中,then方法支持两个参数,入参类型均为函数,第一个为成功时的回调方法,第二个为失败时的回调方法。

通过结果可知promise中一旦调用了succ或fail方法后,就会到then里面对应的回调方法。

简单可以总结成以下的伪代码

scss 复制代码
new Promise(function(succ,fail){
    if(如果成功){
        succ(res)//成功返回
    }else{
        fail(res)//失败返回
    }
})
.then(成功函数,失败函数)
.catch(处理异常函数)

然后很多人会问:这个东西有什么用啊?

来看看以下的代码

javascript 复制代码
$.ajax({
    url:"url",
    success:function(result){
        //用返回结果去请求其他接口
        $.ajax({
          success:function(result){
            $.ajax(....)
          }
        });
    },
    error:function(res){
    }
});

这代码展示的就是以前的一些异步操作做法,需要在回调方法里头继续嵌套代码。

这样导致的问题,嵌套起来一层套一层,可读性不高,代码臃肿。

使用promise后可以把代码变成如下

javascript 复制代码
new Promise(function(succ,fail){
    let res=post(url)//请求业务1接口
    succ(res)//成功返回
})
.then(function(res){
    let res=post(url,res)//请求业务2接口
    console.log("成功返回结果:"+res);
})
.catch(function(err) {
    console.log("统一异常处理:"+err);  
})

代码变成了顺序格式,自上而下层层执行。

然后很多人会问:那catch那里有什么用呢,是不是多余的?

那我们来看看以下的代码

javascript 复制代码
function checkAge(obj){
    return new Promise(function(succ,fail){
        console.log("检测年龄");
        if(obj.age>100||obj.age<1){
            throw new Error("年龄异常");
        }
        obj.status=0;//0正常 1超龄
        if(obj.age>=35){
            obj.status=1;
        }
        console.log("年龄正常:"+obj.age);
        succ(obj)
    })
}
function workGroup(obj){
    console.log("分配上岗途径");
    return new Promise(function(succ,fail){
        if(obj.status==1&&obj.age>=65){
            throw new Error("享福咯");
        }else{
            let dict=["自己找","社会帮你找"]
            succ(dict[obj.status])
        }
    })
}
new Promise(function(succ,fail){
    let xiaoming={age:66,name:"小明"}
    succ(xiaoming)
})
.then(checkAge)
.then(workGroup)
.then(function(res){
    console.log("结果:"+res)
})
.catch(function(err){
    console.log("异常中心:"+err);
})
//----------------结果---------------
/*
--输入66岁--
检测年龄
年龄正常:66
分配上岗途径
异常中心:Error: 享福咯
--输入35岁--
检测年龄
年龄正常:35
分配上岗途径
结果:社会帮你找
--输入0岁--
检测年龄
异常中心:Error: 年龄异常
*/

这段代码其实是模拟了一个流水线作业的流程

年龄是否正常---是否达到了35岁--社会要求你找工作的途径

显然,这个检测流程,如果按照then(成功,失败)这样去写的话,每个then都要去写各自的失败函数,但实际业务开发中这种错误回调往往只是提供一个错误的信息返回就行。

所以这里的catch起到的作用是:

1.如果你没在then里面写失败的回调方法,则会自动调整到catch逻辑处理

2.catch会捕捉整个调用链里头的所有失败回调or所有抛出来的异常

有任何疑惑可到评论区讨论😀

相关推荐
Dontla15 分钟前
为什么React列表项需要key?(React key)(稳定的唯一标识key有助于React虚拟DOM优化重绘大型列表)
javascript·react.js·ecmascript
EndingCoder1 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架
阿阳微客2 小时前
Steam 搬砖项目深度拆解:从抵触到真香的转型之路
前端·笔记·学习·游戏
德育处主任Pro3 小时前
『React』Fragment的用法及简写形式
前端·javascript·react.js
CodeBlossom3 小时前
javaweb -html -CSS
前端·javascript·html
CodeCraft Studio3 小时前
【案例分享】如何借助JS UI组件库DHTMLX Suite构建高效物联网IIoT平台
javascript·物联网·ui
打小就很皮...4 小时前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
集成显卡5 小时前
PlayWright | 初识微软出品的 WEB 应用自动化测试框架
前端·chrome·测试工具·microsoft·自动化·edge浏览器
前端小趴菜056 小时前
React - 组件通信
前端·react.js·前端框架
Amy_cx6 小时前
在表单输入框按回车页面刷新的问题
前端·elementui