ES6新特性（二）：Promise

Promise

Promise对象可以这样理解。创建Promise对象表示创建了一个立即执行的代码（通常为ajax、jsonp这类异步代码），并根据设立的条件（例如ajax请求状态为200OK）执行回调函数。Promise对象只会变为两种状态，成功或失败。并承诺这个状态只能由resolve和reject来改变，其他人不可以改变（promise的状态，不是指200OK这个成功，意思就是执行完resolve了，promise状态就变成成功）。并且承诺状态只会改变一次，状态一旦改变就不会再改变。并承诺无论你什么时候提供回调函数，只要状态改变过（执行过resolve）我就会执行回调函数，你不用担心因为提供回调函数过晚，而错过了状态的改变。

创建Promise对象表示创建了一个立即执行的代码

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('Resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// Resolved

承诺状态只会改变一次，状态一旦改变就不会再改变。换句话说，回调函数只会执行一次，且成功与失败回调函数只会执行其中一个。

new Promise(function(resolve) {
    el.onclick = resolve
}).then(function() {
    console.log('clicked')
})

// 点击el元素多次
// clicked（只会打印一次clicked，因为不会出现两次成功状态）

另外一个例子：

var p1 = new Promise(function(re, rj) {
    rj()
    re()
})

p1.
then(function() {
    console.log(1)
}, function() {
    console.log(2)
})

// 2（re方法不会执行，因为状态已经变为失败）

承诺无论你什么时候提供回调函数，只要状态改变过我就会执行回调函数

const preloadImage = function(path) {
    return new Promise(function(resolve, reject) {
        var image = new Image();
        image.onload = resolve;
        image.onerror = reject;
        image.src = path;
    });
};
const a = preloadImage('images/1.jpeg')

// 数秒后在控制台写下Promise的回调函数
a
    .then(function() {
        console.log('image loaded')
    })
    // image loaded（load事件早已经触发，但是你并没有错过他）

灵活的then方法返回值

then方法如果没有返回另一个Promise对象，则默认返回一个成功状态的新的Promise对象。如果代码中因执行throw语句而抛出错误，则返回一个失败状态的新的Promise对象。

const p1 = new Promise(function(re) {
    re('p1')
})
const p2 = new Promise(function(re) {
    re('p2')
})

p1
    .then(msg => {
        console.log(msg);
        return p2 // 返回另一个Promise对象
    })
    .then(msg => {
        console.log(msg)
    })
    
// p1
// p2

注意是新的Promise对象。参考下面的例子。下面例子中第二个then方法没有接受到任何参数，因为他是新的Promise对象的回调。

const p1 = new Promise(function(re) {
    re('p1')
})
const p2 = new Promise(function(re) {
    re('p2')
})

p1
    .then(msg => {
        console.log(msg);
    })
    .then(msg => {
        console.log(msg);
        return p2 // 返回另一个Promise对象
    })
    .then(msg => {
        console.log(msg)
    })
    
// p1
// undefined
// p2

相当于：

const p1 = new Promise(function(re) {
    re('p1')
})
const p2 = new Promise(function(re) {
    re('p2')
})

p1
    .then(msg => {
        console.log(msg);
        return new Promise(function(re){
          re()
        })
    })
    .then(msg => {
        console.log(msg);
        return p2 // 返回另一个Promise对象
    })
    .then(msg => {
        console.log(msg)
    })
    
// p1
// undefined
// p2

不会被拦截的状态

Promise对象的状态传递是不会被拦截的。例如代码中出现错误会返回一个失败状态的Promise对象，但是这个失败状态不会被拦截，会一直传递到失败回调函数去执行为止。

const p1 = new Promise(function(re) {
    re('p1')
})

p1.then(function(p) {
        console.log(p)
        throw new Error('erro')

    })
    .then(function() {
        console.log(1) // 这个then方法被跳过，因为传递下来的是失败状态的Promise对象
    })
    .catch(function(er){
        console.log(er)
    })
    
// p1
// erro