ES6中的promise法则

Bertha 。 2022-06-04 04:48 233阅读 0赞

## **一，promise用来解决什么问题的** ##

> Promise  
> 为异步编程提供统一的解决方案，比传统的回调和事件更加合理有效。多重嵌套的回调函数，代码是横向发展，不是纵向发展，容易乱成一团，不便管理，称之为”callback  
> hell”，回调地狱或回调恶梦。
> 
> Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的横向加载，改成纵向加载。

## **二，promise的基本认识** ##

1.  Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
2.  Promise new出来的对象有then、catch方法。
3.  Promise的三个状态：Pending 进行中 / Resolved 已成功 / Rejected 已失败
4.  Promise new()的函数立即执行。
5.  用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数。
6.  执行这个函数我们得到了一个Promise对象。

var p = new Promise(function(resolve, reject){ 
        //做一些异步操作
        setTimeout(function(){ 
            console.log('执行完成'); //立即打印
            resolve('随便什么数据');
        }, 2000);
    });

> 在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的的参数。运行这段代码，会在2秒后输出“执行完成”，紧接着输出“随便什么数据”。

## **三，promise的精髓-链式调用** ##

调用：

--------------------

runAsync1()
    .then(function(data){
        console.log(data);
        return runAsync2();
    })
    .then(function(data){
        console.log(data);
        return runAsync3();
    })
    .then(function(data){
        console.log(data);
    });

--------------------

执行结果：

![这里写图片描述][SouthEast]

\*\*

## **四，catch的用法捕获rejected状态** ##

\*\*

> 我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，用法是这样：

getNumber()
    .then(function(data){ 
        console.log('resolved');
        console.log(data);
    })
    .catch(function(reason){ 
        console.log('rejected');
        console.log(reason);
    });

## **五，all的用法** ##

> Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调

Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
        console.log(results);
    });

## **五，race的用法** ##

> all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思

--------------------

> 以上就是对ES6 promise知识的总结

[参考：][Link 1][http://www.cnblogs.com/lvdabao/p/es6-promise-1.html][Link 1]

[浅谈ES6原生Promise：][ES6_Promise][http://blog.csdn.net/sinat\_17775997/article/details/60581125][ES6_Promise]

[ES6笔记 - Promise模式：][ES6_Promise][http://blog.csdn.net/sinat\_17775997/article/details/60581125][ES6_Promise]

[SouthEast]: /images/20220604/40ba84b5e59a4f3ab873b9867eb9b43c.png
[Link 1]: http://www.cnblogs.com/lvdabao/p/es6-promise-1.html
[ES6_Promise]: http://blog.csdn.net/sinat_17775997/article/details/60581125