Vue.js进阶系列(45)--Promise

  非常完美,小编今天又认识了一位新的伙伴,听说十分的友好,所以小编今天特地带它来见见大家 O(∩_∩)O 噢,它的名字叫“Promise”


一、简单介绍

在介绍Promise之前,小编得向大家解析几个名词

1.同步和异步

① 同步
  当用户使用js和浏览器发生交互时,执行到某一个模块时系统发现需要向服务器提供网络请求,这个时候,js操作就会被阻塞,然后浏览器向服务器发送网络请求。
  我们都知道网络请求的速度会比较慢,在此期间,不管用户执行任何操作,浏览器都不会去执行,因为此时的浏览器正在向服务器发送请求,没有空去理会别的操作,这就是同步,简单可以理解成浏览器的执行是按照某中顺序执行的,只有等上一步完成之后才会继续执行下一步操作
② 异步
  异步的含义和同步恰恰相反。当用户和浏览器发生交互,执行到某一模块的时候发现需要向服务器发送网络请求时,这个时候,浏览器向服务器发送请求之后,仍然可以执行别的操作。
  当浏览器向服务器发送的请求得到回应后,我们一般会声明一个函数,将请求的结果放到该函数中,用户执行完某些操作后再回调该函数就可以得到向服务器发送网络请求的数据。
  这就是异步,简单的可以理解成一心二用:一边向服务器发送请求,一边执行相关的操作,最后通过回调某个函数来得到向服务器发动请求的数据。如果只是一个简单的网络请求,这种方案没有什么麻烦,但是当网络请求变得复杂的时候,就会出现回调地狱 Σ(⊙▽⊙"a

2.回调地狱

简单的理解就是函数的迭代。我们举一个简单的例子。比如:


  我们需要通过一个url1从服务器加载一个数据data1,发现data1并不是最终的结果而是包含了下一个请求的url2,然后通过data1取出url2,从服务器加载数据data2,data2中包含了下一个请求的url3,接着通过data2取出url3,从服务器加载数据data3,data3中包含了下一个请求的url4,最后发送网络请求url4,获取最终的数据data4。
  但是如果我们用Promise就不会出现回调地狱,下面我们一起看看什么是promise以及语法是什么

二、基本语法

1.基本定义

  Promise是异步编程的一种解决方案。它是一个,可以通过new的方式创建一个对象。

2.使用场景

  正如它的基本定义一样,一般用在异步请求的场合,并且会将请求数据的模块放在一个地方,处理数据的模块放在另外一个地方,就不会像之前回调函数一样,将请求url数据和处理data1数据都放在同一个地方,小编在下面会给出具体的代码,目前只需要明白两点:
第一:promise用来处理异步编程
第二:promise将请求模块和处理模块分开
下面我们来看看promise如何使用

3.使用语法

① 使用new创建
  我们知道promise是一个类,所以我们可以通过new的方式来创建promise,并且创建的promise是一个函数
② 传入参数
  当我们通过new方式创建promise函数时,就会被要求传入两个参数:resolve和reject,而这两个参数本身又是一个函数
③ then函数
  我们创建完promise之后,将有关的请求数据放在promise内部,然后将处理数据放在then函数,并且当用户执行了resolve函数就会调用then函数。更神奇的是,then本身又是一个函数
有点抽象,我们看看下面的例子:

setTimeout({
    console.log('hello,vue');
},1000)

  以setTimeout为异步事件,经过一秒中后就打印“hello,vue”语句,我们可以假定 setTimeout 函数是向服务器发送的请求,而console.log('hello,vue')是对服务器发送请求的处理,下面使用promise封装过程如下:
第一:声明promise,并将异步事件全部丢到promise函数中

new Promise((resolve,reject)=>{
    setTimeout({
        console.log('hello,vue');
    },1000)
})

  上述代码中,创建了promise函数,两个参数resolve和reject由于本身又是一个函数,所以在这里使用箭头函数来声明,然后将异步事件全部丢进promise函数内部中。
第二:封装数据

new Promise((resolve,reject) =>{
    setTimeout(()=>{
        resolve()
    },1000)
}).then(()=>{
    console.log('hello,vue')
})

  上述代码中,setTimeout函数看作请求,该请求是经过1秒后执行打印语句,将请求放在了promie内部,然后打印语句看作是对请求的处理,放在了then函数中。执行顺序如下:首先进入到promise内部,经过一秒中后执行resolve函数,该函数就会回调then函数,执行then函数内部的打印语句。其效果如下:


在控制台中确实执行了打印语句。
是的,或许有会小伙伴问到,如果网络数据请求失败了怎么办?没关系,Promise中还有另外两个函数 reject 和catch。
reject的用法和resolve的用法是一样的,不一样的是,当请求某些数据失败的时候就会执行reject函数,该函数就会回调catch函数,具体代码如下:

<script>
    new Promise((resolve,reject) =>{
        setTimeout(()=>{
            reject()
        },1000)
    }).catch(()=>{
        console.log('error')
    })
</script>

  因此,针对上述的内容,我们知道,Promise会将不同的处理交给不同的函数去执行,如果网络请求成功,就执行resolve函数,然后回调then函数;如果网络请求失败,就会执行reject函数,然后回调catch函数。所以代码的逻辑就变得十分的清晰明了。
  如果现在体会不到promise的好处,可以往下看看彩蛋,保证震惊到你(✿◡‿◡)因为不细心的人可能看不懂
  好了,今天小编就到这里啦,谢谢大家伙,后面有彩蛋噢,还等什么,看彩蛋来挑战自己吧。


<script>
    new Promise((resolve,reject) =>{
        setTimeout(()=>{
            resolve()
        },1000)
    }).then(()=>{
        console.log('hello,vue')
        return new Promise((resolve,reject) =>{
                setTimeout(()=>{
                    resolve()
                },1000)
            })
        }).then(() =>{
            console.log('hello,java')
            return new Promise((resolve,reject) =>{
                setTimeout(()=>{
                        resolve()
                    },1000)
                })
            }).then(() =>{
                console.log('hello,JavaScript')
            })
</script>

这个就是用promise改变过后的回调地狱,你看懂了嘛o( ̄︶ ̄)o

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容