promise的基本用法

作者: 艾石溪 | 来源:发表于2016-12-22 21:31 被阅读193次

Promise扩展基础
Promise 对象
promise详解
Promise 对象
Promise 的使用
ES6——Promise
Promise基本用法
Promise基本用法
promise的基本用法
Promise的基本用法

为什么会出现promise

1: 为了使深层次的回调，看起来更加简单。避免了层层嵌套的回调函数。

promise的特点

1: 对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。
2:一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

promise的基本使用方法

1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Promise 学习笔记</title>
    <script type="text/javascript">
        window.onload = function() {
            function pms1() {
                return new Promise(function(resolve, reject) {
                    setTimeout(function() {
                        console.log('执行任务1');
                        resolve('执行任务1成功');
                    }, 2000);
                });
            }

            function pms2() {
                return new Promise(function(resolve, reject) {
                    setTimeout(function() {
                        console.log('执行任务2');
                        resolve('执行任务2成功');
                    }, 2000);
                });
            }

            function pms3() {
                return new Promise(function(resolve, reject) {
                    setTimeout(function() {
                        console.log('执行任务3');
                        resolve('执行任务3成功');
                    }, 2000);
                });
            }
            pms1().then(function(data) {
                    console.log('第1个回调：' + data);
                    return pms2();
                })
                .then(function(data) {
                    console.log('第2个回调：' + data);
                    return pms3();
                })
                .then(function(data) {
                    console.log('第3个回调：' + data);
                    return '还没完！该结束了吧！'
                }).then(function(data) {
                    console.log(data);
                });
        }
    </script>
</head>

<body>

</body>

</html>

2: promise.all( )的基本实现。all( )方法相当于&&，当所有的函数执行完之后才会执行then函数。

  var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
  });
  var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
  });// 同时执行p1和p2，并在它们都完成后执行then:
  Promise.all([p1, p2]).then(function (results) { 
    console.log(results); // 获得一个Array: ['P1', 'P2']
 });

3: promise.race( )的基本实现。race( )方法，当其中的某个函数实现完成之后就会执行then函数。

var p1 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) { 
  console.log(result); // 'P1'
});