什么是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所有抛出来的异常

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

相关推荐
Attacking-Coder7 分钟前
前端面试宝典---webpack面试题
前端·面试·webpack
极小狐32 分钟前
极狐GitLab 容器镜像仓库功能介绍
java·前端·数据库·npm·gitlab
程序猿阿伟44 分钟前
《Flutter社交应用暗黑奥秘:模式适配与色彩的艺术》
前端·flutter
rafael(一只小鱼)1 小时前
黑马点评实战笔记
前端·firefox
weifont1 小时前
React中的useSyncExternalStore使用
前端·javascript·react.js
初遇你时动了情1 小时前
js fetch流式请求 AI动态生成文本,实现逐字生成渲染效果
前端·javascript·react.js
影子信息1 小时前
css 点击后改变样式
前端·css
几何心凉1 小时前
如何使用 React Hooks 替代类组件的生命周期方法?
前端·javascript·react.js
小堃学编程2 小时前
前端学习(1)—— 使用HTML编写一个简单的个人简历展示页面
前端·javascript·html
hnlucky2 小时前
通俗易懂版知识点:Keepalived + LVS + Web + NFS 高可用集群到底是干什么的?
linux·前端·学习·github·web·可用性测试·lvs