Javascript 基础之Promise

Noted:
Javscript 是一种单线程直译式的脚本语言,所有的代码都是单线程。由于它具备非阻塞式的特性,导致许多读写、网络等操作都需要回调函数。

//Snippet 1,
Post.getTen(null, page, function (err, posts, total) {
      if (err) {
        posts = [];
      } 
      ....
});

//Snippet 2,
Post.getTen = function(name, page, callback) {
  //打开数据库
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    //读取 posts 集合
    db.collection('posts', function (err, collection) {
          var docs = [];
          var total = 10;
          callback(null, docs, total);
    });
  });
};

为了解决上面代码显示的问题,在ES6中做了一个统一规范Promise,从而优雅的回避了大量的回调函数。

可以在通过以下代码查看local的浏览器是否支持Promise的特性

'use strict';
new Promise(function () {alert('Support Promise!')});

Promise 实例,

//Snippet 1,
function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    setTimeout(function () {
        if (timeOut < 1) {
            resolve('200 OK');
        }
        else {
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}

//Snippet 2,
var p1 = new Promise(test);
var p2 = p1.then(function (result) {
    console.log('successd ' + result);
});
var p3 = p2.catch(function (reason) {
    console.log('failed ' + reason);
});

//Snippet 3,
new Promise(test).then(function (result) {
    console.log('successd ' + result);
}).catch(function (reason) {
    console.log('failed ' + reason);
}); 

Snippet 2 显示,
变量p1是一个Promise对象,它负责执行test函数。由于test函数在内部是异步执行的,当test函数执行成功时,我们告诉Promise对象。
当test函数执行失败时,我们告诉Promise对象。

Snippet 3 显示,
Promise对象可以串联起来,可见Promise 最大的好处就是在代码的执行过程中把执行的代码与处理结果的代码严格的分开了。

Promise 执行串行异步任务

要执行串行的异步任务任务,我们并不需要在写嵌套函数,只需要按照下面的格式:

job1.then(job2).then(job3).then(job4).catch(function (err) { console.log(err)});

// 0.5秒后返回input*input的计算结果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        console.log('multiply ' +input+ ' * ' +input);
        setTimeout(resolve, 500, input * input);
    });
}
// 0.8秒后返回input*input的计算结果:
function add(input) {
    return new Promise(function (resolve, reject) {
        console.log('add ' +input+ ' + ' +input);
        setTimeout(resolve, 800, input + input);
    });
}
var p = new Promise(function (resolve, reject) {
   console.log('start new Promise ... '); 
   resolve(2)
});

p.then(multiply)
.then(add)
.then(multiply)
.then(add)
.then(function (result){
    console.log('Got value ' + result)
}).catch(function (err) {
    console.log(err);
});

Promise 执行并行任务

Promise 也可以执行并行的任务,当我们的支付宝页面一方面要显示账户的余额,另外也要显示打折商家的信息。

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'balance');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 800, 'Detail Mes');
});

Promise.all([p1, p2]).then(function (results) {
    console.log(results)
}).catch(function (err) {
    console.log(err);
});

Promise 执行竞争任务

Promise 也可以实现多任务之间的竞争,比如抢红包。

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'balance');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 800, 'Detail Mes');
});

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

推荐阅读更多精彩内容

  • 你不知道JS:异步 第三章:Promises 在第二章,我们指出了采用回调来表达异步和管理并发时的两种主要不足:缺...
    purple_force阅读 2,037评论 0 4
  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 7,290评论 5 22
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 11,021评论 26 95
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,690评论 0 5
  • 电话又响了、同事又来求助了、领导又叫你了,客户又找上门了......日常工作中,经常会遇到各种突发的状况,手...
    泥泥376阅读 288评论 0 0