[转]JS - Promise使用详解1（基本概念、使用优点）

一、promises相关概念

promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的。

1，then()方法介绍

根据 Promise/A 规范，promise 是一个对象，只需要 then 这一个方法。then 方法带有如下三个参数：

  • 成功回调
  • 失败回调
  • 前进回调（规范没有要求包括前进回调的实现，但是很多都实现了）。

一个全新的 promise 对象从每个 then 的调用中返回。

2，Promise对象状态

Promise 对象代表一个异步操作，其不受外界影响，有三种状态：

  • Pending（进行中、未完成的）
  • Resolved（已完成，又称 Fulfilled）
  • Rejected（已失败）。

（1）promise 从未完成的状态开始，如果成功它将会是完成态，如果失败将会是失败态。

（2）当一个 promise 移动到完成态，所有注册到它的成功回调将被调用，而且会将成功的结果值传给它。另外，任何注册到 promise 的成功回调，将会在它已经完成以后立即被调用。

（3）同样的，当一个 promise 移动到失败态的时候，它调用的是失败回调而不是成功回调。

（4）对包含前进特性的实现来说，promise 在它离开未完成状态以前的任何时刻，都可以更新它的 progress。当 progress 被更新，所有的前进回调(progress callbacks)会被传递以 progress 的值，并被立即调用。前进回调被以不同于成功和失败回调的方式处理；如果你在一个 progress 更新已经发生以后注册了一个前进回调，新的前进回调只会在它被注册以后被已更新的 progress 调用。

（5）注意：只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

3，Promise/A规范图解

4，目前支持Promises/A规范的库

  • Q：可以在NodeJS 以及浏览器上工作，与jQuery兼容，可以通过消息传递远程对象。
  • RSVP.js：一个轻量级的库，它提供了组织异步代码的工具。
  • when.js：体积小巧，使用方便。
  • NodeJS的Promise
  • jQuery 1.5：据说是基于“CommonJS Promises/A”规范
  • WinJS / Windows 8 / Metro

二、使用promises的优势

1，解决回调地狱（Callback Hell）问题

（1）有时我们要进行一些相互间有依赖关系的异步操作，比如有多个请求，后一个的请求需要上一次请求的返回结果。过去常规做法只能 callback 层层嵌套，但嵌套层数过多的话就会有 callback hell 问题。比如下面代码，可读性和维护性都很差的。


1

2

3

4

5

6

7

8

9

10

11

12

firstAsync(function(data){

    //处理得到的 data 数据

    //....

    secondAsync(function(data2){

        //处理得到的 data2 数据

        //....

        thirdAsync(function(data3){

              //处理得到的 data3 数据

              //....

        });

    });

});

（2）如果使用 promises 的话，代码就会变得扁平且更可读了。前面提到 then 返回了一个 promise，因此我们可以将 then 的调用不停地串连起来。其中 then 返回的 promise 装载了由调用返回的值。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

firstAsync()

.then(function(data){

    //处理得到的 data 数据

    //....

    return secondAsync();

})

.then(function(data2){

    //处理得到的 data2 数据

    //....

    return thirdAsync();

})

.then(function(data3){

    //处理得到的 data3 数据

    //....

});

2，更好地进行错误捕获

多重嵌套 callback 除了会造成上面讲的代码缩进问题，更可怕的是可能会造成无法捕获异常或异常捕获不可控。
（1）比如下面代码我们使用 setTimeout 模拟异步操作，在其中抛出了个异常。但由于异步回调中，回调函数的执行栈与原函数分离开，导致外部无法抓住异常。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function fetch(callback) {

    setTimeout(() => {

        throw Error(‘请求失败‘)

    }, 2000)

}

try {

    fetch(() => {

        console.log(‘请求处理‘) // 永远不会执行

    })

} catch (error) {

    console.log(‘触发异常‘, error) // 永远不会执行

}

// 程序崩溃

// Uncaught Error: 请求失败

（2）如果使用 promises 的话，通过 reject 方法把 Promise 的状态置为 rejected，这样我们在 then 中就能捕捉到，然后执行“失败”情况的回调。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

function fetch(callback) {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

             reject(‘请求失败‘);

        }, 2000)

    })

}

fetch()

.then(

    function(data){

        console.log(‘请求处理‘);

        console.log(data);

    },

    function(reason, data){

        console.log(‘触发异常‘);

        console.log(reason);

    }

);

当然我们在 catch 方法中处理 reject 回调也是可以的。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

function fetch(callback) {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

             reject(‘请求失败‘);

        }, 2000)

    })

}

fetch()

.then(

    function(data){

        console.log(‘请求处理‘);

        console.log(data);

    }

)

.catch(function(reason){

    console.log(‘触发异常‘);

    console.log(reason);

});

原文出自：www.hangge.com  转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1635.html

原文地址：https://www.cnblogs.com/dirgo/p/11750578.html

时间： 2024-10-12 23:15:39

[转]JS - Promise使用详解1（基本概念、使用优点）的相关文章

[转]JS - Promise使用详解2（ES6中的Promise）

原文地址:https://www.hangge.com/blog/cache/detail_1638.html 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.其中 Promise 被列为正式规范,成为 ES6 中最重要的特性之一. 1,then()方法 简单来讲,then 方法就是把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数. 而 Promise 的优势就在于这个链式调用.我们可以在 then 方法中继续写 Promise 对象并

js new date详解

创建一个日期对象: var objDate=new Date([arguments list]); var ini_date=new Date(2014,7,0); //是代表7月最后一天 ,也就是2014-07-31 var ini_date=new Date(2014,7,1); //是代表8月第一天 ,也就是2014-08-01参数形式有 以下5种: new Date("month dd,yyyy hh:mm:ss");   new  Date("month dd,yy

【JS】☆★之详解[Object HTMLDivElement]和[Object Object]

[JS]☆★之详解[Object HTMLDivElement]和[Object Object] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Js apply 方法 详解

Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和call的区别在哪里 2.        什么情况下用apply,什么情况下用call 3.        apply的其他

JS事件类型详解

一般事件 onclick IE3.N2 鼠标点击时触发 此事件 ondblclick IE4.N4 鼠标双击时触发 此事件 onmousedown IE4.N4 按下鼠标时触发 此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发 此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发 此事件 onmousemove IE4.N4 鼠标移动时触发 此事件 onmouseout IE4.N3 当鼠标离开某对象范围时触发 此事件 onkeypress IE4.

Node.js继承中的静态类对象(《node.js开发实战详解》书中一些错误的改正)

今天气真好,最近挂掉一些面试之后心情略失落. 神马都是浮云,要永远做好世界第二. 不多提了,你问我心态为啥变好了.-------都是情怀,,. 嗯啊,最近在研究node. 别人问?你这水平还node... 哈哈哈,好伤心.... 不多提了,言归正传. 神马模块化神马的先就不多讲了,就一个module.export和export区别,后者对象的属性属于前者,逆命题不成立. 还有util.inherits(A,B)这个API注意一下A只会继承B的原型方法,原型以外的不会继承.不是说原型中数据是共享的

JS变量对象详解

JS变量对象详解 开年之后工作热情一直不是很高,这几天一直处于消极怠工状态.早上不想起床,起床了不想上班.明明放假之前工作热情还一直很高,一直心心念念的想把小程序项目怼出来,结果休假回来之后画风完全不一样了.我感觉自己得了严重了节后综合征.还好撸了几篇文章,勉强表示这一周的时间没有完全浪费.这篇文章要给大家介绍的是变量对象. 在JavaScript中,我们肯定不可避免的需要声明变量和函数,可是JS解析器是如何找到这些变量的呢?我们还得对执行上下文有一个进一步的了解. 在上一篇文章中,我们已经知道

Android入门——Fragment详解之基本概念与用法（一）

引言 Android在3.0中引入了Fragments的概念,其目的是用在大屏幕设备上–例如平板电脑上,支持更加动态和灵活的UI设计.平板电脑的屏幕要比手机的大得多,有更多的空间来放更多的UI组件,并且这些组件之间会产生更多的交互.Fragment允许这样的一种设计,而不需要你亲自来管理 Viewhierarchy的复杂变化. 通过将Activity的布局分散到Fragment中, 你可以在运行时修改Activity的外观,并在由Activity管理的back stack中保存那些变化. 一.F

深入 Promise(一)——Promise 实现详解

if (typeof Promise === 'undefined') {   return} 实现 Promise/A+ 规范的库有很多,lie 是一个精简的实现 Promise/A+ 的库,并且通过了 Promise/A+ 专门的测试集,但 lie 的代码写的有点绕,我在 lie 的代码基础上进行了修改,使之更容易阅读和理解,并发布了 appoint 模块供大家参考. Promise/A+ 规范 Promise 规范有很多,如 Promise/A,Promise/B,Promise/D 以及