浅析Promise

164 阅读2分钟

Promise: 含义

0、字面意思是 “承诺”。

1、这个对象可以获取异步操作的消息。

2、Promise的状态不受外界的影响,只和异步返回的结果有关

简言之:Promise表示一个异步操作的最终状态(完成或失败),以及其返回的值。

Promise状态:

pending: 初始状态,既不是成功,也不是失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 Promise方法:

  1. Promise.prototype.catch(onRejected) 异步执行失败的回调函数,并且会返回一个新的Promise对象。

  2. Promise.prototype.then(onFulfilled, onRejected)

异步执行成功的回调函数,并且会返回一个新的Promise对象。

  1. Promise.prototype.finally(onFinally)

不管成功或失败都会执行的一个回调函数,并且会返回一个新的Promise对象。

实例demo:

demo1:

<script>
        function test(resolve, reject) {
            var timeOut = Math.random() * 2;
            console.log('set timeout to: ' + timeOut + ' seconds.');
            setTimeout(function () {
                if (timeOut < 1) {
                    console.log('call resolve()...');
                    resolve('200 OK');
                }
                else {
                    console.log('call reject()...');
                    reject('timeout in ' + timeOut + ' seconds.');
                }
            }, timeOut * 1000);
        }

        var p1 = new Promise(test);
        var p2 = p1.then(function (result) {
            console.log('成功:' + result);
        });
        var p3 = p2.catch(function (reason) {
            console.log('失败:' + reason);
        });
    </script>

运行结果:

demo1解析:生成一个随机数,如果小于1则执行成功的回调,大于1则执行失败的回调。

其中 p1.then 时成功的回调,p2.catch时失败的回调。

demo2:(Promise多个任务处理流程)

<script>
        // 0.5秒后返回input*input的计算结果:
        function multiply(input) {
            return new Promise(function (resolve, reject) {
                console.log('calculating ' + input + ' x ' + input + '...');
                setTimeout(resolve, 500, input * input);
            });
        }

        // 0.5秒后返回input+input的计算结果:
        function add(input) {
            return new Promise(function (resolve, reject) {
                console.log('calculating ' + input + ' + ' + input + '...');
                setTimeout(resolve, 500, input + input);
            });
        }

        var p = new Promise(function (resolve, reject) {
            console.log('start new Promise...');
            resolve(123);
        });

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

    </script>

运行结果:

demo2解析:

变量p中存了一个Promise对象,直接执行成功的回调,并传入 123 作为参数, 然后执行回调multiply, multiply 函数返回一个新的 Promise对象,并将传入的参数相乘,直接执行成功的回调(传入相乘以后的结果) 执行 multiply的成功回调 add 函数,add函数 返回一个新的Promise,并将传入的参数相加,直接执行成功的回调(传入相加以后的结果) 以此类推…… 知道最后一个then,执行最后一个Promise成功的回调,并输出到日志。