写法的区别
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)
}
})
})
}
网友评论