关于javascript异步代码中try...catch语句失效的问题
在javascript开发中,正确处理异步操作中的错误至关重要。本文将针对一个案例,分析为什么try...catch语句在异步代码中未能捕获异常。
问题描述:一段代码中,refreshdata函数包含一个try...catch块,用于处理refreshtoken函数可能抛出的错误。然而,即使refreshtoken函数发生错误,catch块也没有被执行。
代码片段如下:
let isrefreshtoken = false const request = (url:string, method:string, data?:any) => { return new promise(async (resolve, reject) => { if (isrefreshtoken) return // 判断token超时,刷新token if (store.getters.expirestime && new date().gettime() >= store.getters.expirestime) { await refreshdata() return } ... } const refreshdata = async () => { if (!isrefreshtoken) { isrefreshtoken = true if (!store.getters.refertoken) { cleandata() isrefreshtoken = false } else { console.log(123); try { let res = await refreshtoken(store.getters.refertoken) store.dispatch('saveinfo', res) isrefreshtoken = false uni.switchtab({ url: '/pages/device/index' }) } catch (error) { cleandata() } console.log(333); } } }
问题在于request函数内部使用了new promise(async (resolve, reject) => { ... })这种方式。async函数内部的await会暂停执行,但并不会将refreshdata函数内部的异常传递给promise的reject函数。
解决方案:
有两种方式可以解决这个问题:
第一种方式:将request函数声明为async函数,直接使用await调用refreshdata,这样refreshdata中发生的异常会自动向上冒泡,并被await捕获。
const request = async (url: string, method: string, data?: any) => { if (isrefreshtoken) return // 判断token超时,刷新token if (store.getters.expirestime && new date().gettime() >= store.getters.expirestime) { await refreshdata() return } }
第二种方式:如果必须使用new promise,则需要在refreshdata函数执行完毕后,通过then和catch方法来处理refreshdata的返回结果和异常。
const request = (url: string, method: string, data?: any): Promise<unknown> => { return new Promise((resolve, reject) => { if (isRefreshToken) return // 判断token超时,刷新token if (Store.getters.expiresTime && new Date().getTime() >= Store.getters.expiresTime) { refreshData().then(resolve, reject); return } }); }
需要注意的是,这两种方法都是处理异步错误的方式,并不是同步代码。 await 只是异步编程中的语法糖,它并不能改变异步操作的本质。