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

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

相关推荐
朴拙数科15 分钟前
技术长期主义:用本分思维重构JavaScript逆向知识体系(一)Babel、AST、ES6+、ES5、浏览器环境、Node.js环境的关系和处理流程
javascript·重构·es6
拉不动的猪1 小时前
vue与react的简单问答
前端·javascript·面试
污斑兔1 小时前
如何在CSS中创建从左上角到右下角的渐变边框
前端
星空寻流年1 小时前
css之定位学习
前端·css·学习
旭久2 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
是纽扣也是烤奶2 小时前
关于React Redux
前端
阿丽塔~2 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
冴羽2 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom2 小时前
Langflow:打造AI应用的强大工具
前端·面试·github