ES6-Promise

最新推荐文章于 2024-05-24 18:15:02 发布

Saucey_6

最新推荐文章于 2024-05-24 18:15:02 发布

阅读量787

点赞数

分类专栏： es6 文章标签： ES6

es6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Promise

what?

在我看来Promise就相当于一个承诺容器，将所要执行的事件存贮在promise容器中。
Promise在ES6中被统一规范，由浏览器直接支持。

ES6语法中说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

首先测试一下浏览器是否支持Promise:

new Promise (function(){});
//测试
alert('support Promise!')

Promise的特点：

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：
- Pending(进行中)
- Fulfilled(已成功)
- Rejected(已失败)
一旦状态改变，就不会在变，任何时刻都会得到这个结果。
- 状态改变只有两种
```
         Pending——Fulfilled
         Pending——Rejected
```

How?

ES6规定，Promise对象是一个构造函数，用来生成Promise实例：

 let promise = new Promise(function (resolve, reject) {
            //...
            if (/*success*/) {
                resolve(value);
            } else {
                reject(value);
            }
        });

Promise接受一个函数作为参数，函数的参数分别为resolve和reject.

resolve函数作用：将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去;
reject函数作用：将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别制定Resolved状态和Rejected状态的回调函数。

example:

new Promise(function (resolve, reject) {
    log('start new Promise...');
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}).then(function (r) {
    log('Done: ' + r);
}).catch(function (reason) {
    log('Failed: ' + reason);
});

timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果，过了指定时间(f参数)以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。

可见：Promsie最大的好处就是在异步执行的流程中，把执行代码和处理结果的代码清晰的分离出来。

这里写图片描述

Promise功能很多，如果有若干个异步任务，需要先做任务1,如果成功，在做任务2，如果中间任何一个任务失败，才不继续进行执行处理函数
要串行执行这样的异步任务，就可以写成

obj1.**then**(obj2).**then**(obj3).**catch**(handleError)

其中obj1、obj2和obj3都是Promise对象。

example

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

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

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

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

结果：

Log:

start new Promise...

calculating 123 x 123...

calculating 15129 + 15129...

calculating 30258 x 30258...

calculating 915546564 + 915546564...

Got value: 1831093128