js中Promise的用法

        对于更深入学习前端的我,看到Promise,头就大的,到处查资料,都说是异步编程,然后巴拉巴拉一堆专业术语。对于我这种刚接触的,看着就是蒙。
        我是一个粗人,花里胡哨的文案理解不了,随着我看的案例多了,渐渐的,有了自己的理解,在这里我总结一下。本文章会持续完善更新

js中Promise的用法

自己的理解:

        大家都应该看过火影忍者吧,对鸣人的分身术应该膜拜的不行,反正我小时候就幻想着,要是我有分身术,分10几个我出来,一个写数学作业,一个写语文作业,一个写英语作业……每天就不用写作业写到这么晚了。想象是美好的,现实是残酷的,我们不能分身,只能一项一项作业做。
        Promise就是打破美好幻想者,它迫使你即使有分身也只能排着队,一个一个来完成作业。
 

通过代码理解:

// 语文作业
function Chinese(){
    return new Promise(resolve => {
        console.log("开始做语文作业");
        setTimeout(() => {
            console.log('语文作业做完了!')
            resolve(true)
        }, 2000)
    })
}
// 数学作业
function math(){
    return new Promise(resolve => {
        console.log("开始做数学作业");
        setTimeout(() => {
            console.log('数学作业做完了!')
            resolve(true)
        }, 2000)
    })
}
// 英语作业
function English(){
    return new Promise(resolve => {
        console.log("开始做英语作业");
        setTimeout(() => {
            console.log('英语作业做完了!')
            resolve(true)
        }, 2000)
    })
}
// 现实中的写作业,6秒完成
// 语文->数学->英语的顺序
Chinese().then(()=>{
    return math() //注意这里返回的是Promise对象哦
}).then(()=>{
    return English() //注意这里返回的是Promise对象哦
}).then(()=>{
    console.log('作业做完了^_^!')
})
// 幻想中的写作业,2秒完成
Chinese()
math()
English()

现实幻想代码注释其中一个看效果
再解释一下:Promise就是把一个分身做一项作业按顺序排列起来。
 

异步和同步

异步:一个分身做语文,一个分身做数学,一个分身做英语,三个分身同时开始写作业。
同步:做完语文做数学,做完数学做英语,做完英语就完成了作业。
可能你会觉得我异步同步写反了,那我建议你去看我专门异步同步而写的文章:js异步同步
 

为什么说Promise异步编程解决方案

        我们可以发现,本来js使用setTimeout分出来的分身。在Promise的作用下,做完一项做下一项,所以说Promise是异步编程的解决方案。
        这很重要!因为我们向后端请求数据,因为网速等原因,使得我们不知道什么时候能拿到数据进行数据展示,有了Promise,它就会告诉我们已经拿到数据,可以开始展示了
 

如果没有Promise

我们写作业代码将变得:

console.log("开始做语文作业");
setTimeout(() => {
    console.log('语文作业做完了!')
    console.log('开始做数学作业')
    setTimeout(() => {
        console.log('数学作业做完了!')
        console.log('开始做英语作业')
        setTimeout(() => {
            console.log('英语作业做完了!')
            console.log('作业做完了^_^!')
        }, 2000)
    }, 2000)
}, 2000)

与使用Promise相比,代码更丑,不便于阅读、理解。

暂无评论

发送评论 编辑评论


				
上一篇
下一篇