今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么。

未来值

假设我们今天来到快餐店,点了一个汉堡,付钱给店员。

点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回传值(也就是汉堡)。

不过常见情况是,汉堡还没做好,不能立即给我,店员给了我一张收据上面写着点餐号码。这个点餐号码是一种「我欠你」的承诺(promise),确保我最后能够拿到我的汉堡。

所以只要拿着收据,我就能确保我未来的汉堡,不需要去担心。这样在等待的同时我就能够做其他事情,像是滑手机。

直到店员喊了我的号码,我拿着我的收据到柜台给店员换得了我的汉堡。

换句话说,一旦未来值准备就绪,我就能够用手上对值的承诺(value-promise)交换那个值本身。

但还有另一种结果,就是叫了我的号码,我走过去后店员跟我说汉堡卖完了。

这时候我们可以看到未来值一个重要的特性:代表成功,也可能代表失败。

也就是说Promise物件的设计就是针对异步函式的执行结果所设计的,最后的结果要不然就用一个回传值来fulfilled(实现),要不然就用一个理由(错误)来rejected(拒绝)。

那到底要怎么用呢?首先我们要先建立一个Promise物件:

var promise = new Promise(function(resolve,reject){

//成功时

resolve(value)

//失败时

reject(reason)

});

promise.then(function(value){

// on fulfillment(已实现时)

},function(reason){

// on rejection(已拒绝时)

})

建构式传入参数需要一个函式,称为executor有强烈执行的意味,当传入这个函式时,会在建构式回传物件实体前立即执行,也就是说Promise会立即决定里面的状态,resolve或reject,两者都必须是函式类型。

成功执行resolve(value)而Promise物件的状态会跑到fulfilled状态固定住(cumminsathletic);

失败或是发生错误时执行reject(reason)而Promise物件的状态会跑到rejected状态固定住。

也因为与一般物件实体化过程不太一样,所以通常会先包在一个函式中,需要使用时再呼叫函式来产生Promise物件:

function generatePromise(value){

return new Promise(function(resolve,reject){

if(value)

resolve(value)//已实现,成功

else

reject(reason)//有错误,已拒绝,失败

});

}

再来刚刚上面示例有看到说promise后面接着then。那then是什么呢?

then

then在Promise标准中是一个重要的方法,代表「然后、接着或接下来」的意思。then方法物件被称为thenable物件,我们来看个示例:

promise.then(onFulfilled,onRejected);

promise.then(function(value){

// fulfillment

},function(reason){

// rejection

});

then一样用两个函式当作参数传入,onFulfilled和onRejected。onFulfilled是当Promise物件状态转为fulfilled时呼叫的函式,会有一个传入参数值value可用;onRejected则是Promise物件状态转为rejected时呼叫,会有一个传入参数值reason可用。

而在最后,then会回传另一个「新的Promise物件」。

讲了那么多概念上的东西是不是令人难以理解?没关系,这边用个实际示例来讲解:

var promise = new Promise(function(resolve,reject){

resolve(1)

})

promise

.then(function(value){

console.log(value)// 1

return value + 1

})

.then(function(value){

console.log(value)// 2

})

then方法中的onFulfilled函式,也就是第一个传入的函式参数,它是有值时使用的函式,经过连锁的结构,如果要把值往下传递,可以用回传值的方式,让这个值可以继续的往下面的then方法传送。

那如果不用Promise,直接用callback会怎么样呢?

function doA(doB){

doB(1,doC)

}

function doB(val,doC){

doC(val+1)

}

function doC(val){

console.log(val);

}

doA(doB);

是不是看起来有点痛苦,而且我们还没加上如果失败时的函式呢(bargaintravel4u)!

今天就先到这边,如果有错误欢迎留言指正,明天会说明Promise失败时的函式用法!

转载于:https://www.cnblogs.com/lannyQ-Q/p/9985846.html

学JS的心路历程-Promise(一)相关推荐

  1. 学JS的心路历程 -非同步执行

    JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...

  2. 学JS的心路历程 -函式(三)this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  3. 学JS的心路历程 -物件与原型(二)

    昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...

  4. 学JS的心路历程 -数组常见处理方法

    昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一 ...

  5. 学JS的心路历程Day28 - PixiJS -基础(二)

    材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材 ...

  6. 学JS的心路历程-函式(五)箭头函式

    箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...

  7. 学习JS的心路历程-参数传递方式(上)

    很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来 ...

  8. 学习JS的心路历程-函式(一)

    前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙 ...

  9. 尤雨溪创立 Vue.js 的心路历程纪录片

    Show More 本文分享自微信公众号 - 生信科技爱好者(bioitee). 如有侵权,请联系 support@oschina.cn 删除. 本文参与"OSC源创计划",欢迎正 ...

最新文章

  1. (邓爱萍)类对象-this关键字
  2. Lync Server 2013 实战系列之六:标准版-安装和更新LyncServer 系统
  3. 解决达梦数据库新增大字段报错问题
  4. 英特尔在网络营销之下即将出现大动作,第二季度服务器出货率将有所提升
  5. COCOA的UIVIEW动画护展
  6. 拼多多技术事故复盘,程序员应该学到什么?
  7. 开发常见错误解决(1)注册.NET EnterpriseServices COM+组件,事务服务不可用
  8. Veritas Storage Foundation 5.0 HA for Windows
  9. jdbc mysql 远程数据库_jdbc 连接远程mysql数据库的有关问题
  10. linux抓包命令不用root用户,linux中非root用户使用wireshark进行抓包
  11. 中国电信校园宽带客户端连接服务器无响应,天翼校园客户端出现了错误码,是在提示什么?...
  12. 音视频转码ffmpeg(十六)
  13. ImageJ下载安装使用
  14. (一) Windows环境下的Detours编译
  15. 值得收藏-50个免费可商用图库
  16. 【评测】常用免疫细胞培养基
  17. 微信小程序-云开发上传文件、图片
  18. 拼多多败诉:砍价始终差0.9%侵犯知情权,被判赔400元
  19. 使用moviepy快速剪辑和拼接视频
  20. 变位词算法C语言,第二章 啊哈!算法(变位词)

热门文章

  1. C#中窗体的close,dispose,以及application.exit()的区别
  2. step4 . day4 库函数和库函数的制作
  3. Scratch-介绍“克隆”
  4. (53)zabbix模板
  5. mybatis02--增删改查
  6. 《Linux4.0设备驱动开发详解》笔记--第三章:Linux下的C编程特点
  7. 自定义Dialog(图片,文字说明,单选按钮)----类ListPreference实现(2)
  8. GDI+中发生一般性错误的解决办法 from http://www.cnblogs.com/winzheng/archive/2008/12/23/1360440.html...
  9. Flex读取XML配置文件
  10. Python 24天 正则表达式