Promise

Promise定义和使用

Promise是ES6引入的异步编程的新解决方案，语法上Promise是一个构造函数，用来封闭异步操作并可以获取其成功或失败的结果

Promise状态有以下几种：

• 待定pending:初始状态，即没有成功，也没有失败
• 成功fulfilled：意味着操作成功完成
• 失败rejected:意味操作失败

Promise使用：

• Promise构造函数new Promise((resolve, reject)=>{})
• Promise.prototype.then()方法
• Promise.prototype.catch()方法

        let p = new Promise((resolve, reject)=>{
            setTimeout(() => {
                let isSuccess = true;
                if (isRight) {
                    let data = '请求成功'
                    resolve(data)
                }else{
                    let err = '请求失败'
                    reject(err);
                }
            }, 1000);
        })

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

Promise封装Ajax请求

        const p = new Promise((resolve, reject)=>{
            const xhr = new XMLHttpRequest();
            xhr.open('get','https://api.apiopen.top/getJoke');
            xhr.send();
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(xhr.response);
                    }else{
                        reject(xhr.status)
                    }
                }
            }
        })

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

Promise.prototype.then方法

Promise.ptototype.then方法返回的依然是Promise对象，对象状态由回调函数的执行结果决定

具体情况如下

• 若then方法写返回值，则then方法返回的对象的状态值为成功 fulfilled,返回结果值为 undefinded

        const p = new Promise((resolve, reject)=>{
            setTimeout(() => {
                
            }, 1000);
        })

       const res = p.then((value)=>{
            console.log(value);
        },(reason)=>{
            console.log(reason);
        })

        console.log(res);//Promise {<pending>}

• 如果回调函数中返回的结果是非Promise类型的属性，则then方法返回的对象，其状态为成功fulfilled,返回结果值取决于then方法所执行的是哪个函数（resolve 或 reject）

        const p = new Promise((resolve, reject)=>{
            setTimeout(() => {
                reject('失败')
            }, 1000);
        })

       const res = p.then((value)=>{
            console.log(value);
            return '成功了'
        },(reason)=>{
            console.log(reason);
            return '失败了'
        })

        console.log(res);//Promise {<pending>}

• 如果回调函数中返回的结果是Promise类型 return new Promise(),则then方法的Promise对象状态与该返回结果的状态相同，返回值也相同

        const p = new Promise((resolve, reject)=>{
            setTimeout(() => {
                resolve('成功了。。。。')
            }, 1000);
        })

       const res = p.then((value)=>{
            console.log(value);
            return new Promise((resolve, reject)=>{
                resolve('111 成功了');
            })
        },(reason)=>{
            console.log(reason);
            return new Promise((resolve, reject)=>{
                reject('222  出错了')
            })
        })

        console.log(res);//Promise {<pending>}

• 如果回调函数中返回的结果是throw语句抛出异常，则then方法的对象的状态值为 rejected,返回结果值为throw抛出的字面量或者Error对象

        const p = new Promise((resolve, reject)=>{
            setTimeout(() => {
                resolve('成功了。。。。')
            }, 1000);
        })

       const res = p.then((value)=>{
            console.log(value);
            return new Promise((resolve, reject)=>{
                throw new Error('错误了！！！')
            })
        })

        console.log(res);//Promise {<pending>}

链式调用

Promise.prototype.then方法返回的结果还是Promise对象，我们可以继续在该结果上使用then方法，也就是链式调用，杜绝回调地狱

        const p = new Promise((resolve, reject)=>{
            setTimeout(() => {
                resolve('成功了。。。。')
            }, 1000);
        })

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