async和promise总结

**写法的区别**

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 ldPromise(fn)

p1.then(function(res){

      console.log(”这是成功做的事情“)
      console.log(res)

 })

p1.catch(function(res){

      console.log(”这是失败做的事情“)
      console.log(res)
 })

 

p1promise发送了异步操作，必然会有一个未来事件，在未来要执行，这个过程由传入的函数对象fn执行

函数fn里必然由成功执行和失败执行的函数

1创建类构造对象

    
            class ldPromise{
                constructor(fn) {
                    //存成功的事件列表
                    this.successList=[]
                    //存失败的事件类表
                    this.failList=[]
                    //一开始的状态初始pending ,成功fullfilled,失败rejected
                    this.stata="pending"
                    //传进去的函数调用(异步操作的函数内容)
                    fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
                }
            }

构造函数的作用：

 声明成功函数放置的数组对象

声明失败函数放置的数组对象

定义初始化对象

调用传入进来执行异步内容的函数（在未来有成功的结果时调用传入的进去的成功函数，在未来失败时调用传入的进去的失败函数）

 

2 传入成功或者失败时需要调用的函数

            class ldPromise{
                constructor(fn) {
                    //存成功的事件列表
                    this.successList=[]
                    //存失败的事件类表
                    this.failList=[]
                    //一开始的状态初始pending ,成功fullfilled,失败rejected
                    this.stata="pending"
                    //传进去的函数调用(异步操作的函数内容)
                    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)
                    }
                        
                }
            }

 

作用：将成功和失败的函数传入至成功和失败的数组里

 

3.定义调用成功和失败的函数

            class ldPromise{
                constructor(fn) {
                    //存成功的事件列表
                    this.successList=[]
                    //存失败的事件类表
                    this.failList=[]
                    //一开始的状态初始pending ,成功fullfilled,失败rejected
                    this.stata="pending"
                    //传进去的函数调用(异步操作的函数内容)
                    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,i){
                        
                        //将成功的事件循环调用
                        item(res)
                    })
                }
                rejectFn(res){
                    this.state="rejected"
                    //将注册到的失败所有事件进行调用
                    this.failList.forEach(function(res){
                        item(res)
                    })
                    throw Error(res)
                }
            }

作用：成功时调用数组里的所有函数，失败时调用失败数组里所有的函数

 

4.应用

如何将promise与synce和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(456)

 

        })

 

转化成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)

            }

        })

    })

}

使用的时候就可以使用promise写法

p1 = fsRead(path)  //就可以得到promise对象

p1.then (function(data){

    console.log("输出数据："，data)

})

 

async_await写法

(async()=>{

    let p1 = await  fsRead(path)

})()

异步saync函数调用之后也是一个promise对象需要在，then获取或者再用一个异步async包裹起来也可以用await