ES6 Promise剖析

---

一、Promise是什么

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

二、Promise的特点

1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：

• 从pending变为fulfilled
• 从pending变为rejected。

这两种情况只要发生，状态就凝固了，不会再变了。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

三、Promise的优缺点

优点： 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
缺点： 首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

四、Promise的创建

const promise = new Promise((resolve, reject) => {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
}).then(
    (res) => { console.log(res) },  // 成功
    (err) => { console.log(err) } // 失败
)

五、then和catch

Promise.prototype.then 方法返回的是一个新的 Promise 对象，因此可以采用链式写法。
Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的别名，用于指定发生错误时的回调函数。

then和catch的特点

1. promise中then方法和catch 都是异步的 会加入微任务队列
2. 在未决阶段的处理函数都是同步的会立即执行
3. promise的对象 一旦从未决状态变成已决状态 那么状态就不会再发生改变

const promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var num = Math.random()
        console.log('随机数生成的值：', num)
        if (num > 0.5) {
            resolve(num);
        }
        else {
            reject('数字小于0.5了即将执行失败回调');
        }
    }, 2000);
}).then(
    function(data) {
        console.log('resolved成功回调');
        console.log('成功回调接受的值：', data);
    }
).catch(function (reason, data) {
        console.log('catch到rejected失败回调');
        console.log('catch失败执行回调抛出失败原因：', reason);
});	

写在then的第二个参数里面一样。它将大于10的情况下的失败回调的原因输出，但是，它还有另外一个作用：在执行resolve的回调时，如果抛出异常了,那么并不会报错卡死js，而是会进到这个catch方法中。

六、async 和 await

async 和 await 是在ES2016里面提出来的 目的是为了简化promise中api的使用

async的作用 : 是为了简化在函数返回值中对promise对象的创建
async 的用法 : 用于修饰函数 放在函数声明的最前面 被修饰的函数返回值一定是一个Promise对象

async function test() {
    // return 3;
    throw 2;
}

// 等同于一下代码 : 
// function test() {
//     return new Promise((resolve, reject) => {
//          resolve(3);
//     })
// }

await 等待
使用的注意点 : await关键字必须出现在async的函数中
await的用法 : 用在某个表达式的前面 这个表达式的返回值是一个Promise对象 那么得到的是这个Promise对象调用then方法得到的状态数据

function test1() {
    return new Promise((resolve, reject) => {
        resolve(3);
    })
}

function test2() {
    return new Promise((resolve, reject) => {
        test1().then(data => {
            console.log(data);
            resolve();
        })
    })
}

下面是async await的写法

async function test1() {
    return 3;
}
async function test2() {
    const res = await test1();
    console.log(res);
}
test2();

使用的注意点 :
异步函数 是从ES2016开始支持的

基本用法 :

1. 使用的时候 在普通的函数前面加上async 调用的时候 和普通函数一样调用
2. async 函数 一般都要配合await使用
3. await后面接的一般情况下 接的是promise对象 返回值是调用then方法之后状态数据