promise异步编程

2021-09-06

一、Promise定义

1、抽象表达

(1)Promise 是一门新的技术(ES6 规范);

(2)Promise 是 JS 中进行异步编程的新解决方案。

备注：旧方案是单纯使用回调函数，一个回调函数中嵌套另一个异步任务，层级太多导致不便于阅读，也不便于异步处理。

2.具体表达

(1)从语法上来说: Promise 是一个构造函数;

(2)从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值。

异步编程包括：fs文件操作、数据库操作、AJAX、定时器

二、为什么要用Promise

1.回调地狱的缺点

(1)缩进太多，不便于阅读；

(2)不便于异常处理；

2.Promise优点

(1)支持链式调用，可以解决回调地狱问题；

(2)指定回调函数的方式更加灵活；

旧方案：必须在启动异步任务之前指定回调函数

Promise：启动异步任务 -> 返回promise对象 -> 给promise对象绑定回调函数

三、Promise的状态

1.Promise的状态即实例对象中的一个属性：PromiseState

(1) pending 未决定的

(2) resolved / fullfilled 成功

(3) rejected 失败

2.promise的状态改变

(1)pending变为resolved

(2)pending变为rejected

说明: 只有这 2 种, 且一个 promise 对象只能改变一次。无论变为成功还是失败, 都会有一个结果数据。成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

四、Promise对象的值

Promise对象的值即实例对象中的另一个属性：PromiseResult，保存着异步任务成功/失败的结果

五、Promise的工作流程

六、Promise基本使用

(1)初体验

<body>
    <button id="btn">点击抽奖</button>
</body>
<script>
    /* 点击按钮，1s后显示是否中奖，中奖概率为30% */
    
    // 生成随机数
    function rand(m, n) {
        return Math.ceil(Math.random() * (n - m + 1)) + m + 1;
    }
    // // 获取元素对象
    // const btn = document.querySelector('#btn');
    // // 绑定单击事件
    // btn.addEventListener('click', function() {
    //     setTimeout(() => {
    //         let n = rand(1, 100);
    //         if(n <= 30) {
    //             alert("中奖了！");
    //         } else {
    //             alert("再接再厉！");
    //         }
    //     }, 1000);
    // })

    // promise形式实现
    const btn = document.querySelector('#btn');
    btn.addEventListener('click', function() {
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                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>

(2)fs模块

const fs = require('fs');

// 回调函数形式
// fs.readFile('./resource/content.txt', (err, data) => {
//     // 如果出错，则抛出错误(throw抛出错误会阻塞后面的代码)
//     if (err) throw err;
//     // 输出文件内容
//     console.log(data.toString());
// });

// promise形式
let p = new Promise((resolve, reject) => {
    fs.readFile('./resource/content.txt', (err, data) => {
        // 如果出错，则抛出错误
        if (err) reject(err);
        // 输出文件内容
        resolve(data);
    });
});
// 调用then
p.then(
    (value) => {
        console.log(value.toString());
    },
    (reason) => {
        console.log(reason);
    }
);

(3)AJAX请求

<body>
    <button id="btn">点击发送请求</button>
    <script>
        // 回调函数形式
        // const btn = document.querySelector('#btn');
        // btn.addEventListener('click', function() {
        //     // 1.创建对象
        //     const xhr = new XMLHttpRequest();
        //     // 2.初始化
        //     xhr.open('GET', 'https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2');
        //     // 3.发送
        //     xhr.send();
        //     // 4.处理响应结果
        //     xhr.onreadystatechange = function() {
        //         if(xhr.readyState === 4) {
        //             if(xhr.status >= 200 && xhr.status < 300) {
        //                 console.log(JSON.parse(xhr.response));
        //             } else {
        //                 console.log('请求失败');
        //             }
        //         }
        //     }
        // });

        // promise形式
        const btn = document.querySelector('#btn');
        btn.addEventListener('click', function() {
            const p = new Promise((resolve, reject) => {
                // 1.创建对象
                const xhr = new XMLHttpRequest();
                // 2.初始化
                xhr.open('GET', 'https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2');
                // 3.发送
                xhr.send();
                // 4.处理响应结果
                xhr.onreadystatechange = function() {
                    if(xhr.readyState === 4) {
                        if(xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                        } else {
                            reject('请求失败');
                        }
                    }
                }
            });
            p.then((value) => {
                console.log(JSON.parse(value));
            }, (reason) => {
                console.log(reason);
            });
        });
    </script>
</body>

(4)promise封装fs操作

// 封装一个函数mineReadFile，读取文件内容
function mineReadFile(path) {
    return new Promise((resolve, reject) => {
        // 读取文件
        require('fs').readFile(path, (err, data) => {
            // 判断
            if (err) reject(err);
            // 成功
            resolve(data);
        });
    });
}
mineReadFile('./resource/content.txt').then(
    (value) => {
        console.log(value.toString());
    },
    (reason) => {
        console.log(reason);
    }
);

(5)until.promisify方法

// util.promisify
// 引入util模块
const util = require('util');
// 引入fs模块
const fs = require('fs');
// 返回一个新的函数，将回调函数风格的方法转换成promise风格的函数
let mineReadFile = util.promisify(fs.readFile);

mineReadFile('./resource/content.txt')
    .then((value) => {
        console.log(value.toString());
    })
    .catch((err) => {
        console.log(err);
    });

(6)promise封装AJAX

<body>
    <script>
        // 封装一个函数sendAJAX发送GET AJAX请求
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', url);
                xhr.send();
                // 处理结果
                xhr.onreadystatechange = function() {
                    if(xhr.readyState === 4) {
                        // 判断成功
                        if(xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                        } else {
                            reject(xhr.status);
                        }
                    }
                }
            })
        };
        sendAJAX('https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2')
        .then(value => {
            console.log(value);
        }, reason => {
            console.log(reason);
        })
    </script>
</body>

七、如何使用Promise

1.API

1.Promise 构造函数: Promise (excutor) {}

(1) executor 函数: 执行器 (resolve, reject) => {}

(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}

(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

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

(1) onResolved 函数: 成功的回调函数 (value) => {}

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

说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise 对象

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

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

说明: then()的语法糖, 相当于: then(undefined, onRejected)

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

(1) value: 成功的数据或 promise 对象

说明: 返回一个成功/失败的 promise 对象

// 如果传入的参数为非Promise类型的对象，则返回的结果为成功Promise对象
// 如果传入的参数为Promise对象，则参数的结果决定了 resolve 的结果
let p1 = Promise.resolve(555);
console.log(p1);
let p2 = Promise.resolve(new Promise((resolve, reject) => {
    resolve('OK');
}))
console.log(p2);
let p3 = Promise.resolve(new Promise((resolve, reject) => {
    reject('ERROR');
}))
console.log(p3);
p3.catch(reason => {})  // 不加catch会控制台报错，因为p3是失败的Promise，且没有对应的回调来处理

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

(1) reason: 失败的原因

说明: 返回一个失败的 promise 对象

1
2
3

// 无论传入什么参数(即便是成功的Promise对象)，都返回一个失败的Promise对象
let p1 = Promise.reject(123);
console.log(p1);

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

(1) promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            resolve('success1');
        });
        let p2 = Promise.resolve('success2');
        let p3 = Promise.resolve('success3');
        const result1 = Promise.all([p1, p2, p3]);
        console.log(result1);

        let p4 = new Promise((resolve, reject) => {
            resolve('success1');
        });
        let p5 = Promise.reject('error');
        let p6 = Promise.resolve('success3');
        const result2 = Promise.all([p4, p5, p6]);
        console.log(result2);
    </script>
</body>

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

(1) promises: 包含 n 个 promise 的数组

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

<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            resolve('success1');
        });
        let p2 = Promise.resolve('success2');
        let p3 = Promise.resolve('success3');
        const result1 = Promise.race([p1, p2, p3]);
        console.log(result1);   // p1先改变了状态

        let p4 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success1');
            }, 1000);
        });
        let p5 = Promise.resolve('success2');
        let p6 = Promise.resolve('success3');
        const result2 = Promise.race([p4, p5, p6]);
        console.log(result2);   // p5先改变了状态
    </script>
</body>

八、Promise关键问题

1.如何改变promise的状态

(1) resolve(value): 如果当前是 pending 就会变为 resolved

(2) reject(reason): 如果当前是 pending 就会变为 rejected

(3) 抛出异常: 如果当前是 pending 就会变为 rejected

// Promise对象状态改变的方式
let p = new Promise((resolve, reject) => {
    // 1.resolve函数
    // resolve('ok');  // pending => fullfilled(resolve)
    // 2.reject函数
    // reject('error');  // pending => rejected
    // 3.抛出错误
    // throw 'error';
});

2.能否执行多回调

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

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

3.改变 promise 状态和指定回调函数谁先谁后

(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

(2) 如何先改状态再指定回调?

① 在执行器中直接调用 resolve()/reject() (即执行器里的是同步任务)

② 延迟更长时间才调用 then()

(3) 什么时候才能得到数据?

① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据

② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

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

(1) 简单表达: 由 then()指定的回调函数执行的结果决定

(2) 详细表达:

① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值

③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

5.promise 如何串联多个操作任务

(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用

(2) 通过 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
});

6.promise 异常穿透

(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,

(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

7.中断promise链

(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数

(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 1000);
});
p.then(value => {
    console.log(111);
    return new Promise(() => {});
}).then(value => {
    console.log(222);
}).then(value => {
    console.log(333);
}).catch(reason => {
    console.warn(reason);
})

九、Promise自定义封装

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise自定义封装</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
            // resolve('OK');
            // reject('error');
            // 抛出异常
            // throw 'error';
            setTimeout(() => {
                reject('aaa');
            }, 1000);
        });
        // console.log(p);
        // const res = p.then(value => {
        //     console.log(value);
        //     // throw 'rr';
        // }, reason => {
        //     console.warn(reason);
        // });
        // p.then(value => {
        //     console.log('success');
        // }, reason => {
        //     console.warn('error');
        // });

        // const o = Promise.resolve('OK');
        // console.log(o);

        // const o1 = Promise.reject('error');
        // console.log(o1);

        // p.then()
        // .then(value => {
        //     console.log(111);
        // }).then(value => {
        //     console.log(222);
        // }).then(value => {
        //     console.log(333);
        // }).catch(reason => {
        //     console.warn(reason);
        // })

        // let p1 = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         resolve('OK')
        //     }, 1000);
        // });
        // let p2 = Promise.resolve('success')
        // let p3 = Promise.resolve('yes')
        // let result = Promise.race([p1, p2, p3])
        // console.log(result);

        let p1 = new Promise((resolve, reject) => {
            resolve('OK');
            console.log(111);
        })
        p1.then(value => {
            console.log(222);
        })
        console.log(333);
    </script>
</body>
</html>

promise.js

function Promise(excutor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 声明属性
    this.callbacks = [];
    // 保存实例对象的 this 的值
    const self = this;

    // resolve函数
    function resolve(data) {
        // 判断状态是否已经改变
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象状态（promiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象结果值（promiseResult）
        self.PromiseResult = data;
        // 执行成功的回调函数
        setTimeout(() => {
            self.callbacks.forEach((item) => {
                item.onResolved(data);
            });
        });
    }
    // reject函数
    function reject(data) {
        // 判断状态是否已经改变
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象状态（promiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象结果值（promiseResult）
        self.PromiseResult = data;
        // 执行失败的回调函数
        setTimeout(() => {
            self.callbacks.forEach((item) => {
                item.onRejected(data);
            });
        });
    }
    // 同步调用执行器函数
    try {
        excutor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    // 判断回调函数参数,设置默认值函数onRejected，用于异常穿透
    if (typeof onRejected !== 'function') {
        onRejected = (reason) => {
            throw reason;
        };
    }
    // 设置默认值函数onResolved，用于值传递
    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);
            }
        }

        // 调用回调函数 PromiseState
        if (this.PromiseState === 'fulfilled') {
            setTimeout(() => {
                callback(onResolved);
            });
        } else if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callback(onRejected);
            });
        } else if (this.PromiseState === 'pending') {
            // 保存回调函数
            this.callbacks.push({
                onResolved: function () {
                    callback(onResolved);
                },
                onRejected: function () {
                    callback(onRejected);
                },
            });
        }
    });
};

// 添加catch方法
Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
};

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

// 添加reject方法
Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
};

// 添加all方法
Promise.all = function (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++;
                    // 保证结果顺序
                    arr[i] = v;
                    if (count === promises.length) {
                        resolve(arr);
                    }
                },
                (r) => {
                    reject(r);
                }
            );
        }
    });
};

// 添加race方法
// 不需要判断数组项改变状态的先后了
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(
                (v) => {
                    // 修改返回对象的状态为成功
                    resolve(v);
                },
                (r) => {
                    // 修改返回对象的状态为成功
                    reject(r);
                }
            );
        }
    });
};