前端学习笔记：JavaScript ES6之Promise期约

尚硅谷Web前端Promise教程从入门到精通教程：
https://www.bilibili.com/video/BV1GA411x7z1?p=1

本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。

1. Promise介绍与基本使用

1.1 Promise是什么？

1.1.1 promise介绍

Promise是ES6新增的异步解决方案，可以封装异步的任务，并且对结果进行处理。最大的好处是可以解决回调地狱，而且指定回调与错误处理更加灵活方便。

从语法上来说：Promise是一个构造函数
从功能上来说：Promise对象用来封装一个异步操作并且获取其成功值/失败值

异步编程：

fs文件操作（nodejs的模块）require('fs').readFile('./index.html', (err, data)=>{})
数据库操作
ajax $.get('/server', (data)=>{})
定时器setTimeout、setInterval setTimeout(() => {}, 2000)

1.1.2 Promise状态

Promise状态是实例对象中的一个属性 PromiseState

pending 待定
resolved / fullfilled 已解决
rejected 已拒绝

状态改变：

pending变为resolved
pending变为rejected

注：只有这两种改变方式，而且只能改变一次。无论是成功还是失败，都只会有一个数据结果。成功数据一般称为value，失败结果一般称为reason。

1.1.3 Promise对象的值

Promise值是实例对象中的另一个属性 PromiseResult

保存着异步任务成功/失败的结果

可以通过这两个函数进行赋值，设置完后可以在then和catch回调中对值进行操作。

resolve
reject

1.1.4 Promise的基本流程

在这里插入图片描述

1.2 为什么使用Promise？

1.2.1 指定回调函数的方式更加灵活

旧的：必须在启动异步任务前指定
promise：启动异步任务→返回promise对象→给promise对象绑定回调函数（甚至可以在异步任务结束后指定/ 多个）

1.2.2 支持链式调用，解决回调地狱问题

回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件。

缺点：

不便于阅读
不便于异常处理（每个异步任务都需要进行错误处理，可能会有重复性代码）

// 回调地狱
asyncFunc1(opt, (...args1) => {
    
    
    asyncFunc2(opt, (...args2) => {
    
    
        asyncFunc3(opt, (...args3) => {
    
    
            asyncFunc4(opt, (...args4) => {
    
    
                // some operation
            })
        })
    })
})

1.3 Promise实例

1.3.1 中奖demo

<div class="container">
    <h2 class="page-header">Promise 初体验</h2>
    <button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
    // 点击按钮，1s后显示是否中奖（30%概率）
    // 若中奖，弹出恭喜恭喜；若未中奖，弹出再接再厉

    // 获取随机数值
    function rand(min, max) {
      
      
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // 获取元素对象
    const btn = document.querySelector('#btn');
    // 绑定单击事件
    btn.addEventListener('click', function () {
      
      
        // 未封装：
        // setTimeout(() => {
      
      
        //     // 30%的中奖概率，获取1-100的一个随机数
        //     let n = rand(1, 100);
        //     // 判断
        //     if (n <= 30) {
      
      
        //         alert('恭喜恭喜');
        //     } else {
      
      
        //         alert('再接再厉');
        //     }
        // }, 1000);

        // Promise 形式实现
        const p = new Promise((resolve, reject) => {
      
      
            setTimeout(() => {
      
      
                // 30%的中奖概率，获取1-100的一个随机数
                let n = rand(1, 100);
                // 判断
                if (n <= 30) {
      
      
                    resolve(n); // 将promise对象的状态设置为成功
                } else {
      
      
                    reject(n); // 将promise对象的状态设置为失败
                }
            }, 1000);
        });
        // 调用then方法，如果成功，执行第一个回调函数，如果失败，执行第二个回调函数
        p.then(value => {
      
      
            alert('恭喜恭喜，您的中奖数字为' + value);
        }, reason => {
      
      
            alert('再接再厉，您的号码为' + reason);
        })
    });
</script>

1.3.2 Promise封装原生AJAX

<div class="container">
    <h2 class="page-header">Promise 封装AJAX操作</h2>
    <button class="btn btn-primary" id="btn">点击发送AJAX</button>
</div>
<script>
    // 获取元素对象
    const btn = document.querySelector('#btn');
    // 绑定单击事件
    btn.addEventListener('click', function () {
      
      
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化
        xhr.open('GET', 'https://api.apiopen.top/getJoke');
        // 3. 发送
        xhr.send();
        // 4. 处理响应结果

        // 未封装：
        // xhr.onreadystatechange = function () {
      
      
        //     // 状态为4时响应
        //     if (xhr.readyState === 4) {
      
      
        //         // 判断响应状态码2xx
        //         if (xhr.status >= 200 && xhr.status < 300) {
      
      
        //             // 控制台输出响应体
        //             console.log(xhr.response);
        //         } else {
      
      
        //             // 输出相应响应状态码
        //             console.log(xhr.status);
        //         }
        //     }
        // }

        // promise封装：
        xhr.onreadystatechange = function () {
      
      
            // 创建promise
            const p = new Promise((resolve, reject) => {
      
      
                // 状态为4时响应
                if (xhr.readyState === 4) {
      
      
                    // 判断响应状态码2xx
                    if (xhr.status >= 200 && xhr.status < 300) {
      
      
                        // 控制台输出响应体
                        resolve(xhr.response);
                    } else {
      
      
                        // 输出相应响应状态码
                        reject(xhr.status);
                    }
                }
            })
            // 调用then方法
            .then(value => {
      
      
                console.log(value);
            }, reason => {
      
      
                console.log(reason);
            });
        }
    });
</script>

2. Promise API

2.1 Promise构造函数 Promise(executor) {}

executor函数：执行器 resolve, reject() => {}
resolve函数：内部定义成功时调用的函数 value => {}
reject函数：内部定义成功时调用的函数 reason => {}

注： executor会在Promise内部立即同步调用，异步操作在执行器中执行

/* API - executor */
let p = new Promise((resolve, reject) => {
    
    
    // 同步调用
    // 修改promise对象的状态为resolved
    resolve('ok');
    // // 修改promise对象的状态为rejected
    // reject('error');
});

2.2 Promise.prototype.then方法 (onResolved, onRejected) => {}

onResolved函数：成功的回调函数 (value) => {}
onRejected：失败的回调函数 (reason) => {}

注：指定用于得到成功value的成功回调和用于得到失败reason的失败回调。返回一个新的promise对象

p.then(value => {
    
    
    console.log(value);
});

2.3 Promise.prototype.catch方法 (onRejected) => {}

onRejected：失败的回调函数 (reason) => {}

注：用于得到失败reason的失败回调。返回一个新的promise对象

p.catch(reason => {
    
    
    console.log(reason);
});

2.4 Promise.resolve方法 (value) => {}

resolve方法属于promise函数对象，不属于实例对象。

value：成功的数据或promise对象

返回一个成功的promise对象

/* API - resolve */
// 如果传入的参数为非promise类型的对象，则返回的结果为成功promise对象
let p1 = Promise.resolve(521);
console.log(p1);
// 如果传入的参数为promise对象，则参数的结果决定了resolve的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
    
    
    // resolve('OK');
    reject('error');
})).catch(reason => {
    
    
    console.log(reason);
});
console.log(p2);

2.5 Promise.reject方法 (reason) => {}

reject方法属于promise函数对象，不属于实例对象。

reason：失败的原因

返回一个失败的promise对象

/* API - reject */
// 无论传入的参数是否为promise对象，返回的结果均为失败promise对象
let p3 = Promise.reject(521);
console.log(p3);
let p4 = Promise.reject(new Promise((resolve, reject) => {
    
    
    resolve('OK');
}));
console.log(p4);

2.6 Promise.all方法 (promises) => {}

promises：包含n个promise的数组

说明：返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败。如果成功，返回所有promise的结果数组。如果失败，返回的是第一个失败的promise的结果。

/* API - all */
let p5 = new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
        resolve('OK');
    }, 0);
});
let p6 = Promise.resolve('success');
let p7 = Promise.reject('error');
let p8 = Promise.resolve('Oh Yeah');
const result1 = Promise.all([p5, p6, p8]);
console.log(result1);
const result2 = Promise.all([p5, p7, p8]);
console.log(result2);

2.7 Promise.race方法 (promises) => {}

promises：包含n个promise的数组

说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态。

/* API - race */
const result3 = Promise.race([p5, p6, p8]);
console.log(result3);

3. Promise关键问题

3.1 如何修改对象的状态

resolve(value);如果当前是pending，变为resolved
reject(reason);如果当前是pending，变为rejected
throw '出问题了'抛出异常。如果当前是pending，变为rejected

let p = new Promise((resolve, reject) => {
    
    
    // 1. resolve函数
    // resolve('ok');
    // 2. reject函数
    reject('error');
    // 3. 抛异常（可以是字符串或异常对象）
    // throw '出问题了';
}).catch(reason => {
    
    
    console.log(reason);
});
console.log(p);

3.2 能否执行多个回调

一个promise指定多个成功/失败回调函数，都会调用吗？

当promise改变为对应状态时都会调用

let p = new Promise((resolve, reject) => {
    
    
    resolve('OK');
});
// 指定回调1
p.then((value) => {
    
    
    console.log(value);
});
// 指定回调2
p.then((value) => {
    
    
    alert(value);
});

3.3 改变状态与指定回调的顺序问题

改变promise状态和指定回调函数的执行顺序谁先谁后？

都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
如何先改变状态再指定回调？
1. 在执行器中直接调用resolve()、reject()
2. 延迟更长时间才调用then()
什么时候才能得到数据？
1. 如果先指定的回调，那当状态发生改变时，回调函数就会执行，得到数据
2. 如果先状态改变，那么当指定回调时，回调函数就会执行，得到数据

let p = new Promise((resolve, reject) => {
    
    
    // 情况1：执行器函数中为同步任务时，先改变状态，再指定回调
    // resolve('OK');
    // 情况2：执行器函数中为异步任务时，可以先指定回调，再改变状态
    setTimeout(() => {
    
    
        resolve('OK');
    }, 0);
});
p.then(value => {
    
    
    console.log(value);
}, reason => {
    
    
    console.log(reason);
});
console.log(p);

3.4 then方法返回结果由什么决定

promise.then()返回的新promise的结果状态由什么决定？

由then()指定的回调函数执行的结果决定
情况分类：
1. 如果抛出异常，新promise变为rejected，reason为抛出的异常
2. 如果返回的是非promise对象，新promise变为resolved，value为返回的值
3. 如果返回的是另一个新promise，此promise就会变成新promise的结果

let p = new Promise((resolve, reject) => {
    
    
    resolve('ok');
});
// 执行then方法
let result = p.then(value => {
    
    
    // 1. 抛出异常
    // throw '出问题了';
    // 2. 返回结果是非promise对象
    // return 521;
    // 3. 返回的结果是promise对象
    return new Promise((resolve, reject) => {
    
    
        // resolve('success');
        reject('error');
    });
}, reason => {
    
    
    console.warn(reason);
});
console.log(result);

3.5 串连多个任务

promise如何串连多个操作任务？

promise的then()返回一个新的promise，可以写为then()的链式调用
d通过then的链式调用串连多个同步/异步任务

let p = new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
        resolve('ok');
    }, 1000);
});
p.then(value => {
    
    
    return new Promise((resolve, reject) => {
    
    
        resolve('success');
    });
}).then(value => {
    
    
    console.log(value);  // success
}).then(value => {
    
    
    console.log(value);  // undefined
});

3.6 异常穿透

当使用promise的then链式调用时，可以在最后指定失败的回调
前面任何操作出了异常，都会传到最后的失败回调中处理

let p = new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
        resolve('ok');
        // reject('err');
    }, 1000);
});
p.then(value => {
    
    
    // console.log(111);
    throw '失败了';
}).then(value => {
    
    
    console.log(222);
}).then(value => {
    
    
    console.log(333);
}).catch(reason => {
    
    
    console.warn(reason);
});

3.7 如何中断promise链

当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
办法：在回调函数中返回一个pendding状态的promise对象

let p = new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
        resolve('ok');
    }, 1000);
});
p.then(value => {
    
    
    console.log(111);
    // 有且只有一个方式，返回一个pending状态的promise对象
    return new Promise(() => {
    
     });
}).then(value => {
    
    
    console.log(222);
}).then(value => {
    
    
    console.log(333);
}).catch(reason => {
    
    
    console.warn(reason);
});

4. Promise自定义封装（手写promise）

promise.js

// 封装Promise类
class Promise {
    
    
    // 构造方法
    constructor(executor) {
    
    
        // 添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        // 声明属性
        this.callbacks = [];
        // 保存实例对象的this的值（手动修改this指向）
        const self = this;
        // resolve 函数
        function resolve(data) {
    
    
            // 判断状态
            if (self.PromiseState !== 'pending') return;
            // 1. 修改对象的状态（promiseState）
            self.PromiseState = 'fullfilled';
            // 2. 设置对象结果值（promiseResult）
            self.PromiseResult = data;
            // 调用成功的回调函数
            setTimeout(() => {
    
    
                self.callbacks.forEach(item => {
    
    
                    item.onResolved(data);
                });
            });
        }

        // reject 函数
        function reject(data) {
    
    
            if (self.PromiseState !== 'pending') return;
            self.PromiseState = 'rejected';
            self.PromiseResult = data;
            // 调用失败的回调函数
            setTimeout(() => {
    
    
                self.callbacks.forEach(item => {
    
    
                    item.onRejected(data);
                });
            });
        }
        try {
    
    
            // 同步调用执行器函数
            executor(resolve, reject);
        } catch (e) {
    
    
            // 修改promise对象为失败
            reject(e);
        }
    }

    // then方法封装
    then(onResolved, onRejected) {
    
    
        // 保存this
        const self = this;
        if (typeof onRejected !== 'function') {
    
    
            onRejected = reason => {
    
    
                throw reason;
            }
        }
        if (typeof onResolved !== 'function') {
    
    
            onResolved = value => value;
        }
        return new Promise((resolve, reject) => {
    
    
            // 封装函数
            function callback(type) {
    
    
                try {
    
    
                    // 获取回调函数的执行结果
                    let result = type(self.PromiseResult);
                    if (result instanceof Promise) {
    
    
                        // 如果是Promise类型的对象
                        result.then(v => {
    
    
                            resolve(v);
                        }, r => {
    
    
                            reject(r);
                        });
                    } else {
    
    
                        // 结果的对象状态为成功
                        resolve(result);
                    }
                } catch (e) {
    
    
                    reject(e);
                }
            }
            // 调用回调函数
            if (this.PromiseState === 'fullfilled') {
    
    
                setTimeout(() => {
    
    
                    callback(onResolved);
                });
            }
            if (this.PromiseState === 'rejected') {
    
    
                setTimeout(() => {
    
    
                    callback(onRejected);
                });
            }
            // 判断pending状态
            if (this.PromiseState === 'pending') {
    
    
                // 保存回调函数
                this.callbacks.push({
    
    
                    onResolved: function () {
    
    
                        callback(onResolved);
                    },
                    onRejected: function () {
    
    
                        callback(onRejected);
                    }
                });
            }
        });
    }

    // catch方法封装
    catch(onRejected) {
    
    
        return this.then(undefined, onRejected);
    }

    // 添加resolve方法
    static resolve(value) {
    
    
        // 返回promise对象
        return new Promise((resolve, reject) => {
    
    
            if (value instanceof Promise) {
    
    
                value.then(v => {
    
    
                    resolve(v);
                }, r => {
    
    
                    reject(r);
                })
            } else {
    
    
                // 状态设置为成功
                resolve(value);
            }
        });
    }

    // 添加reject方法
    static reject(reason) {
    
    
        // 返回promise对象
        return new Promise((resolve, reject) => {
    
    
            reject(reason);
        });
    }

    // 添加all方法
    static all(promises) {
    
    
        // 返回promise对象
        return new Promise((resolve, reject) => {
    
    
            // 声明变量
            let count = 0;
            let arr = [];
            // 遍历数组 
            for (let i = 0; i < promises.length; i++) {
    
    
                promises[i].then(v => {
    
    
                    // 得知对象的状态是成功的
                    count++;
                    // 将当前promise对象成功的结果存入数组中
                    arr[i] = v;
                    if (count === promises.length) {
    
    
                        resolve(arr);
                    }
                }, r => {
    
    
                    // 对象的状态失败
                    reject(r);
                });
            }
        });
    }

    // 添加race方法
    static race(promises) {
    
    
        // 返回promise对象
        return new Promise((resolve, reject) => {
    
    
            // 遍历数组 
            for (let i = 0; i < promises.length; i++) {
    
    
                promises[i].then(v => {
    
    
                    resolve(v);
                }, r => {
    
    
                    reject(r);
                });
            }
        });
    }
}

5. async和await

5.1 async函数

函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定的

// 与then方法返回的规则相同
async function main() {
    
    
    // 1. 如果返回值是一个非promise对象
    // return 521;
    // 2. 如果返回值是一个promise对象
    return new Promise((resolve, reject) => {
    
    
        // resolve('ok');
        // reject('error');
    });
    // 3. 抛出异常
    throw 'oh no';
}
let result = main();
console.log(result);

5.2 await表达式

await右侧的表达式一般为promise对象，但也可以是其它的值
如果表达式是promise对象，await返回的是promise成功的值
如果表达式是其它值，直接将此值作为await的返回值

注：

await必须写在async函数中，但async函数中可以没有await
如果await的promise失败了，就会抛出异常，需要通过try catch捕获异常

async function main() {
    
    
    let p1 = new Promise((resolve, reject) => {
    
    
        resolve('ok');
    });
    let p2 = new Promise((resolve, reject) => {
    
    
        reject('error');
    });
    // 1. 右侧为promise的情况
    let res1 = await p1;
    console.log(res1);
    // 2. 右侧为其他类型的数据
    let res2 = await 20;
    console.log(res2);
    // 3. 如果promise是失败的状态
    try {
    
    
        let res3 = await p2;
    } catch (e) {
    
    
        console.log(e);
    }
}
main();

5.3 async与await结合实践

const fs = require('fs');
const util = require('util');
const minReadFile = util.promisify(fs.readFile);

// 回调函数的方式
fs.readFile('./前端学习路线/JavaScript/Promise期约/async函数.html', (err, data1) => {
    
    
    if (err) throw err;
    fs.readFile('./前端学习路线/JavaScript/Promise期约/await表达式.html', (err, data2) => {
    
    
        if (err) throw err;
        fs.readFile('./前端学习路线/JavaScript/Promise期约/中奖demo.html', (err, data3) => {
    
    
            if (err) throw err;
            console.log(data1 + data2 + data3);
        });
    });
});

// async与await
async function main() {
    
    
    try {
    
    
        let data1 = await minReadFile('./前端学习路线/JavaScript/Promise期约/async函数.html');
        let data2 = await minReadFile('./前端学习路线/JavaScript/Promise期约/await表达式.html');
        let data3 = await minReadFile('./前端学习路线/JavaScript/Promise期约/中奖demo.html');
        console.log(data1 + data2 + data3);
    } catch (e) {
    
    
        console.log(e.code);
    }
}
main();

5.4 async与await结合发送AJAX请求

<button class="btn btn-primary" id="btn">点击获取段子</button>
<script>
    // axios
    function sendAjax(url) {
    
    
    return new Promise((resolve, reject) => {
    
    
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();
        xhr.onreadystatechange = function () {
    
    
            // 创建promise
            // 状态为4时响应
            if (xhr.readyState === 4) {
    
    
                // 判断响应状态码2xx
                if (xhr.status >= 200 && xhr.status < 300) {
    
    
                    // 控制台输出响应体
                    resolve(xhr.response);
                } else {
    
    
                    // 输出相应响应状态码
                    reject(xhr.status);
                }
            }
        }
    })
    // 调用then方法
        .then(value => {
    
    
        console.log(value);
    }, reason => {
    
    
        console.log(reason);
    });
}

// 获取元素对象
const btn = document.querySelector('#btn');
btn.addEventListener('click', async function () {
    
    
    let duanzi = await sendAjax('https://api.apiopen.top/getJoke');
    console.log(duanzi);
});
</script>