浅谈promise与异步编程

前言

在说promise之前,不得不先介绍一下异步编程的知识;

javascript作为一门web而生的语言,他可以响应用户的的交互,点击等各种按键操作。Node.js的出现让javascript在的异步操作运用的更加流行起来,但是程序使用异步编程开发以后,javascript的事件和回调函数就开始无法满足更多复杂的事情(后面会说到)。而这也为后面的promise的出现做了很好的铺垫。

异步编程背景

按照es6里面的原话说,JavaScript引擎是基于单线程事件循环的概念构建的。相反的是java,c++这些多线程的语言来讲,当多个代码块同时访问并改变状态时,程序是很难维护并保证状态不会出错。

而JavaScript引擎的执行在同一时刻只会执行一个代码块。所以在准备执行的时候,每段代码都会被放到任务列表中去,每当引擎中的代码执行完以后事件环(event loop)就会执行下一个任务。然后,队列里面的任务会依次从第一个执行到最后一个。


事件模型和回调函数

事件模型:

普通的一个点击事件的执行如下

let button = document.getElementById("my-btn");

button.onclick = function(event){

    console.log('Clicked');

};

在这段普通的代码中单击以后就会执行console.log的内容,这个事件也会同上面的原理一样被加入到队列中去,但是一旦点击事件onclick没有绑定到button上面的话,就不会发生任何事情。所以button必须要绑定onclick,所以尽管事件模型适用于响应用户的交互和完成这些低频的功能,但是对于比较复杂的需求来说就太死板了。

回调函数

如下是一个简单的回调模型:

readFile("example.txt",function(err, contents){

    if(err){

        throw err;

    }

    console.log(contents);

});

console.log("Hi")

上面的例子输出结果是先输出Hi,然后再读取example.txt

解释一下为什么会是这样:由于使用了回调模式,readFile函数会立即执行,但是读磁盘上面的文件的时候就会暂停,而是立即去执行console.log('Hi');只有当readFile执行结束的时候,才会向任务队列结尾添加添加新的任务,该任务包含回调函数以及相应的参数,当队列的所有任务完成以后才会执行该任务,并且最终执行console.log(contents);

所以回调模式相对于上面的传统事件模型相比较更加灵活,因为它在readFile里面额已添加多个回调。类似if(err)可以写多个;

但是:回调函数在这里就出现了问题。看下面的代码

readFile("example.txt",function(err, contents){

    if(err){

        throw err;

    }

    writeFile("example.txt",function(){

        if(err){

            throw err;

        }

        console.log("written");

     })

});

这里执行的顺序就是readFile函数执行完成以后,任务队列会多出任务,然后再执行writeFile函数,当wrieFile执行完成以后,就会向队列中添加一个任务。你会发现如果再在writeFile里面嵌套回到函数,就会进入传说中的回调地狱中去。这就导致js执行起来大部分时间浪费在回调的请求上面,而这些promise能够很好的解决这个问题。



promise的基本知识

什么是promise?看下面最简单的一个例子。

let promise = readFile("example.txt");

//readFile承诺将在未来的某一个时刻完成

这段代码的写法,就是根本不会去关心如何处理结果,不会去立马读取example.txt文件而是在执行完成readFile()函数以后会返回一个Promise对象,这个对象会有自己的生命周期,而success函数或者fail函数也是由这个promise对象的生命周期来决定。

借用廖雪峰的那句话说就是——古人云:“君子一诺千金”,这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

promise的生命周期的几个状态

进行中:pending(也是unsettled)

异步操作结束:settled

操作结束以后进入两个状态:

Fulfilled异步操作完成

Rejected未能成功完成


内部属性:

其中内部属性[[PromiseState]]表示promise的三种状态:pending,fulfilled,rejected

调用方法:

而这三个方法只能通过then()的方法来采取特定的行动,

所有的promise都有then方法,他接受两个参数,

1.fulfiled状态下要调用的函数(完成函数fulfilled function)

 2.rejected状态下要调用的函数(拒绝函数rejection function)

所有成功失败的附加的数据都会传给这两个函数

(then未完待续,最近没时间,等空闲的时候再补上)

Promise.all方法

Promise.all只会接受一个参数并返回一个promise,而且该参数是一个含有多个受监视器Promise的可迭代对象(比如一个数组),只有当上面所有promise都被解决以后返回的promise才会被解决,只有当可迭代的对象中所有的promise被完成以后返回的promise才会被完成。如果下的例子

let p1 =new Promise(function (resolve,reject) {

    resolve(42);

});

let p2 =new Promise(function (resolve,reject) {

    resolve(43);

});

let p3 =new Promise(function (resolve,reject) {

    resolve(44);

});

let p4 =Promise.all(p1,p2,p3);

p4.then(function (value) {

    console.log(Array.isArray(value)); //true

    console.log(value[0]);  //42

    console.log(value[1]);  //42

    console.log(value[2]);   //42

})

上面代码中只有当promise p1,p2,p3都处于完成状态以后,p4才会被完成。所有传入promise.all()方法的promise只要有一个被拒绝,那么返回的promise没等所有promise都完成就立马被拒绝了。


promise.race()方法

和all方法切好相反,Promise.race()方法不用像all一样必须满足每一个都返回promise,这里只需要有一个Promise被解决返回的Promise就被解决

let p1 =new Promise.resolve(42);

let p2 =new Promise(function (resolve,reject) {

    resolve(43);

});

let p3 =new Promise(function (resolve,reject) {

    resolve(44);

});

let p4 =Promise.all(p1,p2,p3);

p4.then(function (value){   

    console.log(value);   //42

})

小结

promise还有then()一集resolve,reject没有详细介绍,后面会慢慢补上,最近有点忙。加油吧

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

推荐阅读更多精彩内容