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

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 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 

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2024-2-28 14:15
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    37

    主题

    223

    回帖

    350

    积分

    版主

    积分
    350

    油中2周年生态建设者

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

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

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

    使用道具 举报

  • TA的每日心情
    开心
    昨天 18:07
  • 签到天数: 684 天

    [LV.9]以坛为家II

    27

    主题

    733

    回帖

    7199

    积分

    荣誉开发者

    精通各种语言的HelloWord!

    积分
    7199

    荣誉开发者油中2周年生态建设者油中3周年挑战者 lv2

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

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

    呜呜呜,谢谢哥哥
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-12-23 14:05
  • 签到天数: 2 天

    [LV.1]初来乍到

    0

    主题

    6

    回帖

    7

    积分

    助理工程师

    积分
    7
    发表于 2021-12-7 20:54:08 | 显示全部楼层
    多看几遍就看懂了,ggnb!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-12-7 21:18:06 | 显示全部楼层
    雪喜鞋搅笨 发表于 2021-12-7 20:54
    多看几遍就看懂了,ggnb!

    谢谢哥哥!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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