写法的区别

ES5正常写法

getAjax(url,(res)=>{

})

Promise的写法

get(url).then((res)=>{

})

async await写法

(async ()=> {
    let res = await get(url)
})()

总结

1、ES5写法和promise的写法主要区别,在写法不同,可以让回调函数,划分出去,在.then的函数里去执行,使得代码更加的灵活,也可以将两个不同的参数可以划分开来写
2、async和Promise的区别,主要在于async是Promise的语法糖,这种写法在底层编译之后会自动转换成Promise的写法

Promise实现原理

promise需要实现的功能

function fn(resolve,reject){
    setTimeout(()=>{
        if(true){
            resolve()
        }else{
            reject()
        }
    })
}

var p1 = new LcPromise(fn)
p1.then(function(res){
    document.body.style.background = "greenyellow"
    console.log("这是成功做的事情")
    console.log(res)
})

p1.catch(function(res){
    document.body.style.background = "pink"
    console.log("这是失败做的事情")
    console.log(res)
})

p1 promise对象发送了异步请求操作,必然会有一个未来事件,在未来要执行。这个过程由传入的函数对象fn执行,函数fn里必然需要有成功执行和失败执行的函数

第一步 创建类构造对象

class LcPromise{
    constructor(fn){
        //将成功的事件函数集成在success数组里
        this.successList = [];
        //这里将所有的失败函数集成到failList里
        this.failList = [];
        //pending,fullfilled,rejected
        this.state = "padding"
        //传入的函数对象,(异步操作的函数内容)
        fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
    }
}

构造函数的作用

1、声明成功函数放置的数组对象
2、声明失败函数放置的数组对象
3、定义初始化状态
4、调用传入进行执行异步内容的函数(在未来有成功的结果时调用传入进去的成功函数,在未来有失败的结果时调用传入进去的失败函数)

第二步 传入成功或者失败是需要调用的函数

class LcPromise{
    constructor(fn){
        //将成功的事件函数集成在success数组里
        this.successList = [];
        //这里将所有的失败函数集成到failList里
        this.failList = [];
        //pending,fullfilled,rejected
        this.state = "padding"
        //传入的函数对象,(异步操作的函数内容)
        fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
    }
    then(successFn,failFn){
        if(typeof successFn == "function"){
            this.successList.push(successFn)
        }
        if(typeof failFn == "function"){
            this.failList.push(failFn)
        }
    }
    catch(failFn){
        if(typeof failFn == "function"){
            this.failList.push(failFn)
        }
    }
}

作用:

1、将成功和失败的函数传入至成功和失败的数组里

第三步 定义调用成功和失败的函数

class LcPromise{
    constructor(fn){
        //将成功的事件函数集成在success数组里
        this.successList = [];
        //这里将所有的失败函数集成到failList里
        this.failList = [];
        //pending,fullfilled,rejected
        this.state = "padding"
        //传入的函数对象,(异步操作的函数内容)
        fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
    }
    then(successFn,failFn){
        if(typeof successFn == "function"){
            this.successList.push(successFn)
        }
        if(typeof failFn == "function"){
            this.failList.push(failFn)
        }
    }
    catch(failFn){
        if(typeof failFn == "function"){
            this.failList.push(failFn)
        }
    }
    resolveFn(res){
        this.state = "fullfilled"
        this.successList.forEach(function(item,index){
            //将成功的事件循环调用
            item(res)
        })
    }
    rejectFn(res){
        this.state = "rejected"
        //注册到的失败所有事件进行调用
        this.failList.forEach(function(item,index){
            item(res)
        })
        throw Error(res)
    }
}

作用:

1、成功时调用成功数组里所有的函数,失败时调用失败数组里所有的函数

应用

如何将promise与async和await结合使用

典型的异步读写回调操作

fs.readFile(path,{flag:'r',encoding:"utf-8"},function(err,data){
    if(err){
        console.log(err)
        //失败执行内容
        reject(err)
    }else{
        console.log(data)
        //成功执行的内容
        resolve(data)
    }
    console.log(11)
})

转成promise对象

new Promise(function(resolve,reject){
    fs.readFile(path,{flag:'r',encoding:"utf-8"},function(err,data){
        if(err){
            reject(err)
        }else{
            resolve(data)
        }
    })
})

由于每次使用都不想写这么多代码,那么就会把这样的写法直接进行函数的封装

function fsRead(path){
    return new Promise(function(resolve,reject){
        fs.readFile(path,{flag:'r',encoding:"utf-8"},function(err,data){
            if(err){
                reject(err)
            }else{
                resolve(data)
            }
        })
    })
}