promise与async

118 阅读2分钟

写法不同

ES5正常写法
getAjax(url,(res)=>)
Promise
get(url).then((res)=>())
async await
(async ()=>{let res = await get(url) })()
总结:
·ES5写法和Promise写法,主要区别在写法的不同,可以让回调函数,划分出去在then的函数里去执行,使得代码更加的另外,也可以将两个不同的参数,可以划分开来写。 ·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){
   console.log(res);
   console.log("这是成功的事情");
})
p1.catch(function(res){
  console.log(res);
  console.log("这是失败的事情");
})

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

1创建类构造对象

class LcPromise{
    constructor(fn){
        //将成功的事件函数集成在successList数组里
        this.successList =[];
        //这里将所有的失败函数集成到failList里
        this.failList = []
        //pending.fullfilled.rejected
        this.state ="pending"
        //传入的函数对象(异步操作的函数内容)
        fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
    }
}
构造函数的作用:
·声明成功函数放置的数组对象
·声明失败函数放置的数组对象
·定义初始化状态
·调用传入进行执行异步内容的函数(在未来有成功的结果时调用传入的成功函数,在未来失败时调用传入进行的失败函数)

应用

如何将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)
    }
})

转换成promise对象

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