Promise

1. Promise 是什么?

1.1概念

• 从语法上来说: Promise 是一个构造函数
• 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/
  失败的结果值

1.2.promise 的状态改变

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

1.3 promise 的基本流程

1.4promise基本使用

• 1.基本编码流程
  .then（（res）=>{}）回调里的参数res,是resolve()返回的值

// 1.创建 promise 对象(pending 状态), 指定执行器函数
const p = new Promise((resolve, reject) => {
   // 2.在执行器函数中启动异步任务
   setTimeout(() => {
       const time = Date.now();
       if (time % 2 === 1) {
           resolve("成功的值" + time);
       } else {
           reject("失败的值" + time)
       }
   }, 2000);
})
p.then((value) => {  //3.成功的回调函数resolve()
   console.log("成功的value", value);
}, (reason) => {    //4.失败的回调函数reject()
   console.log("失败的reason", reason);
})
//成功的value 成功的值1634534302647

• 2.使用 promise 封装 ajax 异步请求

        function promiseAjax(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.onreadystatechange = () => {
                    if (xhr.readyState !== 4) return;
                    const { status, response } = xhr;
                    // 请求成功,调用resolve()
                    if (status >= 200 && status < 300) {
                        resolve(JSON.parse(response));
                    } else { //请求失败,调用reject()
                        reject(new Error("请求失败:status" + status))
                    }
                };
                xhr.open("GET", url);
                xhr.send()
            })
        };
        // 调用promiseAjax
        promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=video').then(
            data => {
                console.log("显示成功数据" + data);
            },
            error => {
                console.log(error.message);
            }
        )

2.如何使用 Promise?

2.1 API

1. Promise 构造函数

Promise (excutor) {}
executor 函数: 执行器 (resolve, reject) => {}
说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

2. Promise.then ()

Promise.prototype.then ((onResolved, onRejected) => {})
(1) onResolved 函数: 成功的回调函数 (value) => {}
(2) onRejected 函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
返回一个新的 promise 对象

let p = new Promise((resolve, reject) => {
    // 同步调用
    console.log("111");
    // reject('error');
    resolve('success')
});
console.log("2222");
p.then((res) => {
    console.log(res);
},(err) => {
    console.log(err);
})

3.Promise.catch()

Promise.prototype.catch ((onRejected) => {})
onRejected 函数: 失败的回调函数 (reason) => {}

// 状态为reject,执行p.catch
p.catch((reason) => {
    console.log(reason);
})

4.resolve()

Promise.resolve 方法: (value) => {}
返回一个成功/失败的 promise 对象

//1.如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
let p1 = Promise.resolve(100);
console.log(p1);  //Promise { 100 }
// 2.如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
    resolve("ok");
    // reject("error");
}));
p2.then((value) => {
    console.log(value); // "ok"
}, (reason) => {
    console.log(reason);
}) 

5.reject()

Promise.reject 方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的 promise 对象

let p = Promise.reject("123");
console.log(p); //Promise { <rejected> '123' }

6.Promise.all ()

Promise.all 方法: (promises) => {}
promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

let p1 = new Promise((resolve, reject) => {
    resolve("ok");
});
// let p2 = Promise.resolve('success');
let p2 = Promise.reject('Error');
let p3 = Promise.resolve('Oh Yeah');

const result = Promise.all([p1, p2, p3]);
console.log(result);

7.Promise.race()

Promise.race 方法: (promises) => {}
promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(console.log("ok"))
    }, 5000);
})
let p2 = Promise.resolve("seccess");
let p3 = Promise.reject("error");

const result = Promise.race([p1, p2, p3]);
console.log(result); //5s后 ok

3.Promise几个关键问题

1.如何改变 promise 的状态?

• 调用resolve(),pending 就会变为 resolved
• 调用reject(),pending 就会变为 rejected
• 抛出异常: 如果当前是 pending 就会变为 rejected

2.一个 promise 指定多个成功/失败回调函数, 都会调用吗?

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

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

• 由 then()指定的回调函数执行的结果决定

4.promise 如何串连多个操作任务?

• then的链式调用

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

5.promise 异常传透?

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

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("ok");
        // reject("error");
    }, 2000);
})
p.then(value => {
    // console.log(1111);
    throw ("失败啦");
}).then(value => {
    console.log(2222);
}).then(value => {
    console.log(3333);
}).catch(reason => {
    console.log(reason);
})

6.中断 promise 链?

• (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
• (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("ok");
    }, 2000);
})
p.then(value => {
    console.log(1111);
    // 返回一个pending状态的Promise
    return new Promise(() => { })
}).then(value => {
    console.log(2222);
}).then(value => {
    console.log(3333);
}).catch(reason => {
    console.log(reason);
})

4.手写Promise

    
class Promise {
    //构造方法
    constructor(executor) {
        //添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        //声明属性
        this.callbacks = [];
        //保存实例对象的 this 的值
        const self = this;// self _this that
        //resolve 函数
        function resolve(data) {
            //判断状态
            if (self.PromiseState !== 'pending') return;
            //1. 修改对象的状态 (promiseState)
            self.PromiseState = 'fulfilled';// resolved
            //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 {
            //同步调用『执行器函数』
            executor(resolve, reject);
        } catch (e) {
            //修改 promise 对象状态为『失败』
            reject(e);
        }
    }

    //then 方法封装
    then(onResolved, onRejected) {
        const self = this;
        //判断回调函数参数
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason;
            }
        }
        if (typeof onResolved !== 'function') {
            onResolved = value => value;
            //value => { return 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);
                });
            }
            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) {
        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 => {
                    //得知对象的状态是成功
                    //每个promise对象 都成功
                    count++;
                    //将当前promise对象成功的结果 存入到数组中
                    arr[i] = v;
                    //判断
                    if (count === promises.length) {
                        //修改状态
                        resolve(arr);
                    }
                }, r => {
                    reject(r);
                });
            }
        });
    }

    //添加 race 方法
    static race(promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    //修改返回对象的状态为 『成功』
                    resolve(v);
                }, r => {
                    //修改返回对象的状态为 『失败』
                    reject(r);
                })
            }
        });
    }
}