上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]Promise基础解释

[复制链接]

123

主题

932

帖子

550

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
550
发表于 2021-8-22 00:20:21 | 显示全部楼层 | 阅读模式

Promise

Promise代表了未来发生的事件,相当于我与你签订了一个协议,我们现在协议没有办法完成,而在未来的某个时间点,这个协议会由执行中变为履行或者未履行

var myPromise = new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("成功!"); //代码正常执行!
    }, 5000);
});

图片.png

我们创建promise的时候是在New Promise的过程中传入一个函数,promise会调用这个函数,并且传给我们两个参数

resolve以及reject,如果你这个函数最后执行成功了,调用resolve并且传入数据,promise将会变得履行,如果调用reject,则是表示失败了

在代码中可以看到,当履行的过程中会显示pending,而当履行完毕后会显示fulfilled(履行完毕)

但是在这时候我们是拿不到promise的值的,我们该怎么样才能拿到呢?即对promise后添加一个then函数,当promise变为完毕的状态后即会自动调用我们的then函数并且传入数据。

图片.png

当上部分函数调用了resolve后,将会调用挂载到promise上的then函数,并传入参数

这里我通过console.log(data)输出了我们获取到的内容,那大家可能会疑惑,为什么我又return了一个data+'11111'

因为new Promise产生的是一个promise对象,而我们对这个对象挂了then后,then也会返回一个promise对象,这样方便我们对数据进行一层一层的处理或者包装。

图片.png

我们挂载了两层then

第一层then获取到了promise的数据,然后对其进行输出并处理,返回了data+‘11111’交给了第二个then,第二个then是我们最终处理的数据的函数

我们直接输出内容+我处理完数据了,这个promise就宣布完成啦!

需要注意的是第二个then也会返回一个promise,由于我们没有给他返回值,所以是履行状态,返回的值value是一个undefined

为什么then返回的promise是fulfilled,难道他也有执行状态(pending)????

猜对了!在then函数中我们也可以返回一个promise

如果返回普通内容,普通内容将会变成then返回的这个promise的value值

如果返回一个promise,那then返回的promise将直接变成我们返回的promise

new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("周杰伦"); //代码正常执行!
    }, 5000);
}).then(
function(data){
    console.log('我是then,我获取了数据,进行处理'+data)
    return new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("东泥打目"); //代码正常执行!
    }, 000);
})
}
).then(function (data2){
   console.log('then获取了数据,并进行处理,然后获取了新的数据丢给我'+data2)
})

图片.png

我们可以看到,在第一个then中我们创建了一个promise并且返回,当这个promise结束后,会调用第二个then,并传入数据。

那这里promise的大概概念大家已经理解了

那还有最后一个问题,如果我们的promise没有完成怎么办?

我们就需要调用reject表示未履行

var p=new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("周杰伦"); //代码正常执行!
    }, 5000);
})
var then1=p.then(
function(data){
    console.log('我是then,我获取了数据,进行处理'+data)
    return new Promise(function(resolve, reject){
    setTimeout(function(){
        reject("东泥打目被抓了"); //代码正常执行!
    }, 000);
})
}
)
var then2=then1.then(function (data2){
   console.log('then获取了数据,并进行处理,然后获取了新的数据丢给我'+data2)
})
var then2cath=then2.catch((err) => console.log('捕获到了异常', err));
console.log(p,then1,then2,then2cath)

如果我们对promise挂载一个catch,当出现未履行的情况就会直接调用catch

图片.png

这里我们可以看到,当我们在then1里没找到东泥打木,我们调用了reject,reject会传给then2,而then2因为then1的reject也无法履行,继续往下传递,这时候发现了then2身上挂载这一个catch,当发生reject的时候就会调用catch,所以会调用到then2的catch函数,也就是说catch捕获了异常,在reject的过程中会使then的状态传递的,直至遇见catch或完成,最后输出的一个promise是fufilled,因为他是捕获异常,我们再这里并没有搞出来新的异常,所以catch这个promise是完成任务的!

附注

我们还可以添加一个finally,finally的函数不管成功还是失败最后一定会调用finally内的函数

结语

由于promise的概念对于初学者来说相对复杂,如果有问题可以在论坛提问,我也是第一次讲这么复杂的概念,但是一旦你理解之后promise就会变得非常简单,由于本基础教程是电子文档,所以可以随着大家的意见不断改正~

已有1人评分好评 油猫币 贡献 理由
小陈 + 1 + 1 + 1 ggnb!

查看全部评分 总评分:好评 +1  油猫币 +1  贡献 +1 

30

主题

141

帖子

101

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
101

猫咪币纪念章突出贡献热心会员活跃会员

发表于 2021-8-22 00:27:56 | 显示全部楼层
https://www.runoob.com/js/js-promise.html可以与菜鸟教程配和食用!
已有1人评分好评 理由
李恒道 + 1 ggnb!

查看全部评分 总评分:好评 +1 

一叶叶,一声声,空阶滴到明。
回复

使用道具 举报

8

主题

155

帖子

453

积分

中级会员

Rank: 3Rank: 3

积分
453

猫咪币纪念章活跃会员三好学生热心会员中秋纪念章

发表于 2021-8-22 09:06:58 | 显示全部楼层
学会了,哥哥讲的太好了
布[
回复

使用道具 举报

123

主题

932

帖子

550

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
550
发表于 2021-8-22 15:37:28 | 显示全部楼层
Ne-21 发表于 2021-8-22 09:06
学会了,哥哥讲的太好了

呜呜呜,谢谢哥哥
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表