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

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

相关推荐
小码哥_常2 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮5 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀6 小时前
Vue插槽
前端·javascript·vue.js
qq_448011166 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan7 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352907 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝8 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing039 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel9 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放9 小时前
Python基础语法练习题(73)
java·前端·python