async/await优雅的错误处理方法总结

2023-08-29 10:34:05 60

前言

node.js的世界，从callback开始，不会止于async.

本文将给大家详细介绍关于async/await优雅的错误处理的相关内容，下面话不多说了，来一起看看详细的介绍吧

async/await优雅的错误处理

一般情况下async/await在错误处理方面，主要使用try/catch，像这样

constfetchData=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('fetchdataisme')
},1000)
})
}

(async()=>{
try{
constdata=awaitfetchData()
console.log('datais->',data)
}catch(err){
console.log('erris->',err)
}
})()

这么看，感觉倒是没什么问题，如果是这样呢？有多个异步操作，需要对每个异步返回的error错误状态进行不同的处理，以下是示例代码

constfetchDataA=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('fetchdataisA')
},1000)
})
}

constfetchDataB=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('fetchdataisB')
},1000)
})
}

constfetchDataC=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('fetchdataisC')
},1000)
})
}

(async()=>{
try{
constdataA=awaitfetchDataA()
console.log('dataAis->',dataA)
}catch(err){
console.log('erris->',err)
}

try{
constdataB=awaitfetchDataB()
console.log('dataBis->',dataB)
}catch(err){
console.log('erris->',err)
}

try{
constdataC=awaitfetchDataC()
console.log('dataCis->',dataC)
}catch(err){
console.log('erris->',err)
}
})()

这样写代码里充斥着try/catch，有代码洁癖的你能忍受的了吗？这时可能会想到只用一个try/catch。

//...这里fetch函数省略

(async()=>{
try{
constdataA=awaitfetchDataA()
console.log('dataAis->',dataA)
constdataB=awaitfetchDataB()
console.log('dataBis->',dataB)
constdataC=awaitfetchDataC()
console.log('dataCis->',dataC)
}catch(err){
console.log('erris->',err)
//难道要定义err类型，然后判断吗？？
/**
*if(err.type==='dataA'){
*console.log('dataAerris',err)
*}
*......
**/
}
})()

如果是这样写只会增加编码的复杂度，而且要多写代码，这个时候就应该想想怎么优雅的解决，async/await本质就是promise的语法糖，既然是promise那么就可以使用then函数了

(async()=>{
constfetchData=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('fetchdataisme')
},1000)
})
}

constdata=awaitfetchData().then(data=>data).catch(err=>err)
console.log(data)
})()

在上面写法中，如果fetchData返回resolve正确结果时，data是我们要的结果，如果是reject了，发生错误了，那么data是错误结果，这显然是行不通的，再对其完善。

(async()=>{
constfetchData=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('fetchdataisme')
},1000)
})
}

const[err,data]=awaitfetchData().then(data=>[null,data]).catch(err=>[err,null])
console.log('err',err)
console.log('data',data)
//errnull
//datafetchdataisme
})()

这样是不是好很多了呢，但是问题又来了，不能每个await都写这么长，写着也不方便也不优雅，再优化一下

(async()=>{
constfetchData=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('fetchdataisme')
},1000)
})
}

//抽离成公共方法
constawaitWrap=(promise)=>{
returnpromise
.then(data=>[null,data])
.catch(err=>[err,null])
}

const[err,data]=awaitawaitWrap(fetchData())
console.log('err',err)
console.log('data',data)
//errnull
//datafetchdataisme
})()

将对await处理的方法抽离成公共的方法，在使用await调用awaitWrap这样的方法是不是更优雅了呢。如果使用typescript实现大概是这个样子

functionawaitWrap(promise:Promise):Promise<[U|null,T|null]>{
returnpromise
.then<[null,T]>((data:T)=>[null,data])
.catch<[U,null]>(err=>[err,null])
}

以上。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

async/await优雅的错误处理方法总结

热门推荐

随机推荐