跟着B站学前端之promise源码解析与封装

知其然不知其所以然，是最让人头疼的。之前做项目总是偷懒，只会用promise其皮毛，aysnc/await也搞不明白。遇到问题不知如何debug，真是让人头疼。毕竟今天不学习，明天变垃圾，开始向不懂的东西进击吧，前端小菜菜！

课程的五大部分内容：

1.介绍与基本使用
2.Promise的API
3.Promise 中的几个关键问题
4.自定义封装
5.async和await（异步编程的终极解决方案）

1.介绍与基本使用

介绍：promise是新的异步编程的解决方案，支持链式调用，解决了回调地狱的问题，以及指定回调的方式更为灵活（异步编程有：fs文件操作、数据库操作、jax请求、定时器等）
状态：promise的状态是指实例对象当中的一个【promiseState】属性，有pending，fulfilled，rejected。另一个属性【promiseResult】保存了状态的结果。
流程：

image.png

2.Promise的API

Promise构造函数，里面代码是同步执行的
.then方法
.catch方法
.finally方法
Promise.resolve()方法，不是实例上的方法，返回一个成功的promise
Promise.reject()方法，不是实例上的方法，返回一个失败的promise
Promise.race()方法
Promise.all()方法，传入的多个promise都成功才能返回res list，不然会返回第一个失败的结果，可以进行多个ajax的请求

3.Promise 中的几个关键问题

如何改变promise的状态？（resolve/reject/抛出异常)
当一个promise对象指定多个回调即then方法，是否都会调用吗？（是的）
改变promise的状态与指定回调，谁先执行？（都有可能）
promise.then方法返回新的promise的结果状态由什么指定？（由then方法指定的回调函数执行结果来决定）
promise如何串联多个操作任务？（在then()方法里return一个新的promise对象，下一个.then方法就能实现链式调用）
promise的异常穿透？（异常穿透是中间任意一个环节错误，都会捕获到错误，并执行.catch方法）
如何中断promise链？在.then方法中return new Promise(()=>{})，即返回一个pending状态的新promise

4.自定义封装

思考

经过两天的学习与测试，完整的封装源码来咯！

思路：主要先封装好promise的构造函数，扩展实例对象上的then方法以及catch方法，再往上添加构造函数的resolve、reject、all、race等方法。
注意：是异常穿透的捕获、this的指向问题，以及then方法返回的也是个promise，如何实现了链式调用等问题，以及要实现then方法进入异步队列

class版本Promise封装

// class版本Promise封装
class Promise{
    constructor(executor){
        this.PromiseState = 'pending'
        this.promiseResult = null
        this.callbacks = []
        // 成功的函数
        const resolve = (data) =>{
            // 判断状态，仅能修改一次
            if (this.PromiseState !== 'pending') {
                return false
            }
            // 1，修改对象的状态(promiseState)
            this.PromiseState = 'fulfilled'
            // 2，修改对象的返回值(promiseResult)
            this.promiseResult = data
            // 3，调用成功的回调函数
            setTimeout(() => {
                this.callbacks.length>0 && this.callbacks.forEach(item=>{
                    item.onResolved(data)
                })
            });
    
        }
        // 失败的函数
        const reject = (data) =>{
            if (this.PromiseState !== 'pending') {
                return false
            }
            this.PromiseState = 'rejected'
            this.promiseResult = data
            setTimeout(() => {
                this.callbacks.length>0 && this.callbacks.forEach(item=>{
                    item.onRejected(data)
                })
            });
        }
        // 捕获异常, 抛出错误
        try {
            //同步调用的【执行器函数】
            executor(resolve,reject)
        } catch (error) {
            reject(error)
        }
    }
    then(onResolved, onRejected){
        // 判断onRejected是否为一个函数 实现异常穿透的捕获
        if (typeof onRejected !== 'function') {
            onRejected = reason=>{
                throw reason
            }
        }
        // 返回一个promise对象
        return new Promise((resolve, reject)=>{
            function callback(params) {
                // console.log(params);
                try {
                    let result = params
                    // 判断回调函数是否是promise对象
                    if (result instanceof Promise) {
                        result.then(v=>{
                            resolve(v)
                        },r=>{
                            reject(r)
                        })
                    } else {
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }
            // pending => fulfilled
            if (this.PromiseState === 'fulfilled') {
                setTimeout(() => {
                    callback(onResolved(this.promiseResult))
                });
            }
            // pending => rejected
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callback(onRejected(this.promiseResult))
                });
            }
            // 判断pending状态（即构造函数是异步任务时）
            if (this.PromiseState === 'pending') {
                // 保存多个回调函数 执行链式调用
                this.callbacks.push({
                    onResolved: ()=>{
                        callback(onResolved(this.promiseResult))
                    },
                    onRejected: ()=>{
                        callback(onRejected(this.promiseResult))
                    },
                })
            }
        })
    }
    catch(onRejected) {
        return this.then(()=>{}, onRejected)
    }
    static resolve(value) {
        return new Promise((resolve, reject)=>{
            if (value instanceof Promise) {
                value.then(v=>{
                    resolve(v)
                },r=>{
                    reject(r)
                })
            } else {
                resolve(value)
            }
        })
    }
    static reject(value) {
        return new Promise((resolve, reject)=>{
            reject(value)
        })
    }
    static all(list) {
        // 返回的结果 为promise对象
        return new Promise((resolve, reject)=>{
            let count = ''
            let arr = []
            for (let index = 0; index < list.length; index++) {
                // 判断只有全返回成功状态 才能进入数组
                    list[index].then(v=>{
                        count++
                        // 这里不用push是要保证传进来的数组返回时也要一一对应
                        arr[index] = v
                        if (count === list.length) {
                            resolve(arr)
                        }
                    },r=>{
                        reject(r)
                    })
            }
        })
    }
    static race(list) {
        // 返回的结果 为promise对象
        return new Promise((resolve, reject)=>{
            for (let i = 0; i < list.length; i++) {
                list[i].then(v=>{
                    resolve(v)
                },r=>{
                    reject(r)
                })
            }
        })
    }
}

5.async和await（异步编程的终极解决方案）

思考

async：函数的返回值是promise对象，并且结果由async函数的返回值决定（有点类似与then方法）
await：右侧一般为promise对象，并且返回的是其成功的值
注意：
1.await必须写在async关键字的函数中
2.如果await的promise对象返回失败的值，就会抛出异常（需要 try catch捕获处理）
3.await的执行是异步的

用promise封装一个ajax异步请求，结合async语法糖进行调用

// 用promise封装一个ajax异步请求
function sendAjax(url){
    return new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.send()
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4) {
                if (xhr.status >= '200') {
                    resolve(xhr.response)
                }else{
                    reject(xhr.status)
                }
            }
           
        }
    })
}
// 第一种：直接实际调用
sendAjax('https://api.apiopen.top').then(res=>{
    console.log('res', res);
}).catch(err=>{
    console.log('err', err);
})

// 第二种：结合async语法糖进行调用
async function getMetadata(){
    try {
        const data= await sendAjax('https://api.apiopen.top')
    } catch (error) {
        console.log(error);
    }
}
getMetadata()