promise和async的相互转换和错误捕捉 javascriptes6前端

结论

promise 用错误回调和.catch()来处理错误
async用.catch()，和try{}catch(){}来捕捉错误

可能是从jQuery用过来的，个人更喜欢promise的写法
痛点er 【promise和async的相互转换和错误捕捉】到了新公司出奇的忙，忙着熟悉制度、框架、业务。业务中对异步的封装和使用混合了promise和async，要把这两种写法关系理清。
async是promise的语法糖

async function asy(){ return await 1 } asy() instanceofPromise // true

promise工厂

function pr(flag = true) { return new Promise((res, rej) => { setTimeout(() => { flag ? res("success") : rej("error") }, 2000) }) }

promise 的错误捕捉

function catch1() { pr(false).then(() => { // error函数捕捉不到这个错误 throw 'catch1 error' }, (e) => { // 只能处理promise的reject()错误 console.log('catch1 reject', e) }) } function catch2() { pr().then(() => { // catch函数可以捕捉到这个错误 throw 'catch2 error' }).catch((e) => { // 处理reject() ， //处理成功回调和错误回调throw出的错误 console.log('catch2', e) }).finally(() => { console.log('catch2 , finally') }) } catch1() catch2()

async的错误捕捉变成async的promise，是无法区别reject()和手动抛出的错误，错误细节丢失，后面在想用promise then的写法就变得困难的了，要想使用可以

async function catch3() { try { const res = await pr(false).catch((e) => { // 可以省略让下面的catch捕捉 // reject会被捕捉 console.log(3, 'catch()', e) throw e }) console.log('catch3', res) throw "error test" return res } catch (e) { console.log('catch3 try catch', e) throw e } } catch3()

promise和async的相互转换和错误捕捉注意catch5对catch3函数的转换和错误捕捉，错误细节又回来了，神奇

async function catch3() { // promise转await try { const res = await pr(false).catch((e) => { // reject会被捕捉 console.log(3, 'catch()', e) throw e }) console.log(3, 'catch3', res) throw "catch3 throw error" return res } catch (e) { console.log(3, 'try catch', e) // 捕捉上面的throw // 如果上面没有异常回调，异常回调会在这捕捉，再抛出也会被后面的异常回调捕捉到 throw e } }async function catch4() { try { await catch3().catch((e) => { // 捕捉catch3错误回调抛出的异常 console.log(4, 'catch()', e) }) } catch (e) { // 捕捉catch3的throw console.log(4, 'try catch', e) } }; async function catch5() { catch3().then(() => { }, (e) => { // 捕捉catch3的reject console.log(5, 'reject()', e) }).catch((e) => { // 捕捉catch3的throw console.log(5, 'catch()', e) }) }catch4() catch5()

如果感觉对小伙伴有帮助请点赞！
如果感觉对小伙伴有帮助请点赞！