ECMAScript 6入门-12_Promise对象

前言

一 ECMAScript 6简介
二 let和const命令
三变量的解构赋值
四字符串的扩展
五数值的扩展
六数组的扩展
七对象的扩展
八函数的扩展
九 Set和Map数据
零 Iterator和for…of..
一 Generator函数

二 Promise对象

2018.1.28 星期日 22:58 +1 细化笔记

2018.1.14 星期日 20:08

2.1 Promise的含义

所谓Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），且这个事件提供统一的API，可供进一步处理。
Promise对象有以下两个特点。

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

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

如果某些事件不断地反复发生，一般来说，使用stream模式是比部署Promise更好的选择。

2.2 基本用法

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

var promise = new Promise(function(resolve, reject) {
    // ... some code
    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。

/step1/ Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
promise.then(function(value) {
// success
}, function(value) {
// failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不一定要提供。
这两个函数都接受Promise对象传出的值作为参数。

一个Promise对象的简单例子

function timeout(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms, 'done');
    });
}
timeout(100).then((value) => {
    console.log(value);
});

一个用Promise对象实现的Ajax操作的例子

var getJSON = function(url) {
    var promise = new Promise(function(resolve, reject){
        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
        function handler() {
        if (this.status === 200) {
            resolve(this.response);
        } else {
            reject(new Error(this.statusText));
        }
        };
    });
    return promise;
};
getJSON("/posts.json").then(function(json) {
    console.log('Contents: ' + json);
}, function(error) {
    console.error('出错了', error);
});

如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个Promise实例，表示异步操作的结果有可能是一个值，也有可能是另一个异步操作，比如像下面这样。
```
var p1 = new Promise(function(resolve, reject){
    // ...
});
var p2 = new Promise(function(resolve, reject){
    // ...
    resolve(p1);
})
```
注意，这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是Pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是Resolved或者Rejected，那么p2的回调函数将会立刻执行。

2.3 Promise.prototype.then()

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
```
getJSON("/posts.json").then(function(json) {
    return json.post;
}).then(function(post) {
    // ...
});
```
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
```
getJSON("/post/1.json").then(function(post) {
    return getJSON(post.commentURL);
}).then(function funcA(comments) {
    console.log("Resolved: ", comments);
}, function funcB(err){
    console.log("Rejected: ", err);
});    
```
如果采用箭头函数，上面的代码可以写得更简洁
```
getJSON("/post/1.json").then(
    post => getJSON(post.commentURL)
).then(
    comments => console.log("Resolved: ", comments),
    err => console.log("Rejected: ", err)
);
```
2.4 Promise.prototype.catch()
Promise.prototype.catch方法是 .then(null, rejection) 的别名，用于指定发生错误时的回调函数。
..

下面是一个例子。

var promise = new Promise(function(resolve, reject) {
    throw new Error('test')
});
promise.catch(function(error) { console.log(error) });
// Error: test

如果Promise状态已经变成resolved，再抛出错误是无效的。

var promise = new Promise(function(resolve, reject) {
    resolve("ok");
    throw new Error('test');
});
promise
    .then(function(value) { console.log(value) })
    .catch(function(error) { console.log(error) });
    // ok

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。
```
getJSON("/post/1.json").then(function(post) {
    return getJSON(post.commentURL);
}).then(function(comments) {
    // some code
}).catch(function(error) {
    // 处理前面三个Promise产生的错误
});
```
上面代码中，一共有三个Promise对象：一个由getJSON产生，两个由then产生。它们之中任何一个抛出的错误，都会被最后一个catch捕获。
跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。
1. ..
2. ..
3. Node.js有一个unhandledRejection事件，专门监听未捕获的reject错误。
```
process.on('unhandledRejection', function (err, p) {
    console.error(err.stack)
});
```
需要注意的是，catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。
catch方法之中，还能再抛出错误

2.5 Promise.all()

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。
var p = Promise.all([p1,p2,p3]);
上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是Promise对象的实例。（Promise.all方法的参数不一定是数组，但是必须具有iterator接口，且返回的每个成员都是Promise实例。）

// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function(id){
    return getJSON("/post/" + id + ".json");
});
Promise.all(promises).then(function(posts) {
    // ...
}).catch(function(reason){
    // ...
});

2.6 Promise.race()

Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数。

如果Promise.all方法和Promise.race方法的参数，不是Promise实例，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。

2.7 Promise.resolve()

有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用。
var jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面代码将jQuery生成deferred对象，转为一个新的Promise对象。

如果Promise.resolve方法的参数，不是具有then方法的对象（又称thenable对象），则返回一个新的Promise对象，且它的状态为Resolved。
```
var p = Promise.resolve('Hello');
p.then(function (s){
    console.log(s)
});
// Hello
```
Promise.resolve方法允许调用时不带参数。所以，如果希望得到一个Promise对象，比较方便的方法就是直接调用Promise.resolve方法。
```
var p = Promise.resolve();
p.then(function () {
    // ...
});
```
如果Promise.resolve方法的参数是一个Promise实例，则会被原封不动地返回。
2.8 Promise.reject()

2.9 Generator函数与Promise的结合

使用Generator函数管理流程，遇到异步操作的时候，通常返回一个Promise对象。

function getFoo () {
    return new Promise(function (resolve, reject){
        resolve('foo');
    });
}
var g = function* () {
    try {
        var foo = yield getFoo();
        console.log(foo);
    } catch (e) {
        console.log(e);
    }
};
function run (generator) {
    var it = generator();
    function go(result) {
        if (result.done) return result.value;
        return result.value.then(function (value) {
            return go(it.next(value));
        }, function (error) {
            return go(it.throw(value));
        });
    }
    go(it.next());
}
run(g);

上面代码的Generator函数g之中，有一个异步操作getFoo，它返回的就是一个Promise对象。函数run用来处理这个Promise对象，并调用下一个next方法。

2.9 async函数

async函数与Promise、Generator函数一样，是用来取代回调函数、解决异步操作的一种方法。它本质上是Generator函数的语法糖。async函数并不属于ES6，而是被列入了ES7

2018.1.14 20：38

1.28 23：38 细化完成

三异步操作

3.1 基本概念

3.2 Generator函数

3.3 Thunk函数

3.4 co模块

3.5 async函数

2018.1.14 星期日 23:08

四 Class

4.1 Class基本语法

4.2 Class的继承

五 Module

5.1 export命令

5.2 import命令

5.3 模块的整体输入

5.4 module命令

5.5 export default命令

5.6 模块的继承

5.7 ES6模块的转码

六编程风格

6.1 块级作用域

6.2 字符串

6.3 解构赋值

6.4 对象

6.5 数组

6.6 函数

6.7 Map结构

6.8 Class

6.9 模块

七参考链接

7.1 官方文件

7.2 综合介绍

2018.1.15 00：22

读后总结：

知道 Promise是一个对象：构造函数，接受一个函数参数，该函数有resolve,reject两个参数
以及该对象配套方法
目标，是掌握该对象的意义