网站动态页面打不开,网站建设服务支持,微网站开发+在线商城,平面设计接私活一般多少钱大厂技术 高级前端 Node进阶 点击上方 程序员成长指北#xff0c;关注公众号
回复1#xff0c;加入高级Node交 前言 写异步函数的时候#xff0c;promise 和 async 两种方案都非常常见#xff0c;甚至同一个项目里#xff0c;不同的开发人员都使用不同的习惯, 不过关于两… 大厂技术 高级前端 Node进阶 点击上方 程序员成长指北关注公众号
回复1加入高级Node交 前言 写异步函数的时候promise 和 async 两种方案都非常常见甚至同一个项目里不同的开发人员都使用不同的习惯, 不过关于两者的比较不是本文关注的重点只总结为一句话“async 是异步编程的终极解决方案”。 当使用 async 函数的时候很多文章都说建议用 try catch 来捕获异常, 可是实际上我看了很多项目的代码遵循的并不是严谨很多都没有用甚至 catch 函数都没写这是为什么呢 我们先看下使用 try catch 情况下的代码示例 示例1 使用 try catch function getUserInfo () {return new Promise((resolve, reject) {setTimeout(() {reject(请求异常)}, 1000)})
}async function logined () {try {let userInfo await getUserInfo()// 执行中断let pageInfo await getPageInfo(userInfo?.userId)} catch(e) {console.warn(e)}
}logined()
复制代码 执行后会在 catch 里捕获 请求异常然后 getUserInfo 函数中断执行这是符合逻辑的对于有依赖关系的接口中断执行可以避免程序崩溃这里唯一的问题是 try catch 貌似占据了太多行数如果每个接口都写的话看起来略显冗余。 示例2直接 catch 鉴于正常情况下await 命令后面是一个 Promise 对象, 所以上面代码可以很自然的想到优化方案 function getUserInfo () {return new Promise((resolve, reject) {setTimeout(() {reject(请求异常)}, 1000)})
}async function logined () {let userInfo await getUserInfo().catch(e console.warn(e))// 执行没有中断userInfo 为 undefinedif (!userInfo) return // 需要做非空校验let pageInfo await getPageInfo(userInfo?.userId)
}logined()
复制代码 执行后 catch 可以正常捕获异常但是程序没有中断返回值 userInfo 为 undefined, 所以如果这样写的话就需要对返回值进行非空校验, if (!userInfo) return 我觉得这样有点反逻辑异常时就应该中断执行才对 示例3在 catch 里 reject 可以继续优化在 catch 里面加一行 return Promise.reject(e), 可以使 await 中断执行 完整代码 function getUserInfo () {return new Promise((resolve, reject) {setTimeout(() {reject(请求异常)}, 1000)})
}async function logined () {let userInfo await getUserInfo().catch(e {console.warn(e)return Promise.reject(e) // 会导致控制台出现 uncaught (in promise) 报错信息})// 执行中断let pageInfo await getPageInfo(userInfo?.userId)
}logined()
复制代码 一般我们在项目里都是用 axios 或者 fetch 之类发送请求会对其进行一个封装也可以在里面进行 catch 操作对错误信息先一步处理至于是否需要 reject就看你是否想要在 await 命令异常时候中断了不使用 reject 则不会中断但是需要每个接口拿到 response 后先 非空校验 使用 reject 则会在异常处中断并且会在控制台暴露 uncaught (in promise) 报错信息。 截屏2023-03-22 16.55.14.png 建议 不需要在 await 处异常时中断可以这样写需要做非空校验控制台不会有报错信息 let userInfo await getUserInfo().catch(e console.warn(e))
if (!userInfo) return
复制代码 需要在 await 处异常时中断并且在意控制台报错可以这样写 try {let userInfo await getUserInfo()// 执行中断let pageInfo await getPageInfo(userInfo?.userId)
} catch(e) {console.warn(e)
}复制代码 需要在 await 处异常时中断但是不在意控制台报错则可以这样写 let userInfo await getUserInfo().catch(e {console.warn(e)return Promise.reject(e) // 会导致控制台出现 uncaught (in promise) 报错信息
})
// 执行中断
let pageInfo await getPageInfo(userInfo?.userId)复制代码 小结 几种写法初看可能觉得第三种 catch 这种写法是最好的但是细想下从用户体验上来看我觉得 try catch 是最好的逻辑直观、符合同步编程思维控制台不会暴露 uncaught (in promise) 报错信息 而链式调用的 catch (里面再 reject)是传统 promise 的回调写法既然已经用 async await 这种同步编程写法了再用 catch 链式写法感觉没必要。 结语 我是考拉一个热心的前端菜鸟程序员。如果你上进喜欢前端想学习前端那咱们可以交朋友一起摸鱼哈哈摸鱼群关注我拉你进群有5000多名前端小伙伴在等着一起学习哦 -- 作者Ethan_Zhou链接https://juejin.cn/post/7213362932423376933来源稀土掘金 Node 社群 我组建了一个氛围特别好的 Node.js 社群里面有很多 Node.js小伙伴如果你对Node.js学习感兴趣的话后续有计划也可以我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。 “分享、点赞、在看” 支持一波
