【JS】async/await异常捕获，这样做才完美

原创

JavaDog程序狗

发布于 2024-09-30 08:41:25

7340

文章被收录于专栏：前端前端

前言

🍊缘由

JS中async/await异步调用，只能通过try-catch吗？

🍍你想听的故事：

作为一个合格的全栈搬砖工，那必须文武双全，前后必备。遂吾日三省吾身，偶发觉前端长时间不写有些落下，便抽用了摸鱼的时间，检查一下前端小老弟的代码。

不查不知道，一查吓一跳。乍一看小老弟代码清新脱俗，特别规整，但存重大的隐患：

不知道大家看没看出，里面竟然没有异常捕获，完全逻辑代码一把嗦。可能有小伙伴说，我平时也这么写，也没遇到什么大坑，大不了页面报错呗，改就完了。

话虽如此，有坑没趟上，不代表永远顺风输水，如果不进行异常捕获，那么页面逻辑可能会因为此处异常戛然而止，导致后续业务无法正常执行。

光描述可能小伙伴还是没有代码上概念，下面举一个例子便一目了然

举个栗子🌰

有个页面，需要展示会员信息和推荐商品，前端页面需要调用后端接口并把两者赋值，显示到页面上

正常情况：调异步接口正常返回

此处模拟前端调用后端两个接口，分别获取会员信息和商品信息两者互不影响，并打印。小伙伴们可以看到，和我们预想一样，没有趟坑，非常顺利，没有任何问题

// 实例模拟页面初始化调用两个异步接口，并打印成功返回的数据
const getMember = async () => {
    return new Promise((resolve, reject) => {
        // 模拟接口获取会员数据
        setTimeout(() => {
            // 成功返回
            resolve(
                {
                    name: '张三',
                    age: 18
                }
            )
        }, 1000)
    })
}

const getGoods = async () => {
    return new Promise((resolve, reject) => {
        // 模拟接口获取商品数据
        setTimeout(() => {
            // 成功返回
            resolve(
                [{
                    name: '面包',
                    price: 5
                },{
                    name: '牛奶',
                    price: 6
                }]
            )
        }, 2000)
    })
}

const init = async () => {
    const member = await getMember();
    console.log("会员:", member)

    const goods = await getGoods();
    console.log("商品:", JSON.stringify(goods))
}

init();

// 打印结果
// 会员: { name: '张三', age: 18 }
// 商品: [{"name":"面包","price":5},{"name":"牛奶","price":6}]

异常情况：调异步接口且未捕获异常

此处同上模拟前端调用后端两个接口，此时会员信息接口出现问题异常，商品信息接口正常。小伙伴们可以看到，此时就掉入没有捕获异常的的坑了，非常遗憾，后续牵连接口一并因错误戛然而止，出错连坐！

// 实例模拟页面初始化调用两个异步接口，第一个获取会员信息异常，第二个商品数据正常
const getMember = async () => {
    return new Promise((resolve, reject) => {
        // 模拟获取会员数据接口异常
        setTimeout(() => {
            // 成功返回
            reject(new Error('会员接口异常'))
        }, 1000)
    })
}

const getGoods = async () => {
    return new Promise((resolve, reject) => {
        // 模拟接口获取商品数据
        setTimeout(() => {
            // 成功返回
            resolve(
                [{
                    name: '面包',
                    price: 5
                },{
                    name: '牛奶',
                    price: 6
                }]
            )
        }, 2000)
    })
}

const init = async () => {
    const member = await getMember();
    console.log("会员:", member)

    const goods = await getGoods();
    console.log("商品:", JSON.stringify(goods))
}

init();

// 打印结果
// 直接报异常，并且后面正常的商品接口console.log都没有打印内容

这种情况就导致，后续无关接口也无法正常返回，从而页面可能直接崩溃

综上案例，所以异常必须捕获，而且要捕获的漂亮

🎯主要目标

实现重点

async/await异常捕获方法

正文

🥦目标解析

async/await异常捕获方法

方法一：try-catch

任何异步调用全部一把嗦，全部套上try-catch壳

还是以上述内容为案例，将调用接口加入try-catch后，第一个接口异常后，后续接口不受影响

try{
        // 加入try-catch异常捕获
        const member = await getMember();
        console.log("会员:", member)
    }catch (e){
        console.error("会员接口异常:", e)
    }

// 完整代码
const getMember = async () => {
    return new Promise((resolve, reject) => {
        // 模拟获取会员数据接口异常
        setTimeout(() => {
            // 成功返回
            reject(new Error('会员接口异常'))
        }, 1000)
    })
}

const getGoods = async () => {
    return new Promise((resolve, reject) => {
        // 模拟接口获取商品数据
        setTimeout(() => {
            // 成功返回
            resolve(
                [{
                    name: '面包',
                    price: 5
                },{
                    name: '牛奶',
                    price: 6
                }]
            )
        }, 2000)
    })
}

const init = async () => {
    try{
        // 加入try-catch异常捕获
        const member = await getMember();
        console.log("会员:", member)
    }catch (e){
        console.error("会员接口异常:", e)
    }

    try{
        // 加入try-catch异常捕获
        const goods = await getGoods();
        console.log("商品:", JSON.stringify(goods))
    }catch (e){
        console.error("商品异常:", e)
    }
}

init();

// 打印结果
// 会员接口异常:xxxxx
// 商品: [{"name":"面包","price":5},{"name":"牛奶","price":6}]

try-catch的弊端

接口少还好说，无脑加；接口多就会出现大批的try-catch军团，代码冗余并且十分混乱，阅读十分吃力！

方法二：使用 Promise 处理

解释一下：await 命令后面是一个 Promise 对象，直接可以使用.catch来捕获异常

// 直接后面跟着.catch
const member = await getMember().catch((err) => {console.error("会员接口异常:", err)});

// 完整代码
//
const getMember = async () => {
    return new Promise((resolve, reject) => {
        // 模拟获取会员数据接口异常
        setTimeout(() => {
            // 成功返回
            reject(new Error('会员接口异常'))
        }, 1000)
    })
}

const getGoods = async () => {
    return new Promise((resolve, reject) => {
        // 模拟接口获取商品数据
        setTimeout(() => {
            // 成功返回
            resolve(
                [{
                    name: '面包',
                    price: 5
                },{
                    name: '牛奶',
                    price: 6
                }]
            )
        }, 2000)
    })
}

const init = async () => {
    // 加入.catch异常捕获
    const member = await getMember().catch((err) => {console.error("会员接口异常:", err)});
    if(member){
        console.log("会员:", member)
        // 处理会员业务逻辑...
    }

    // 加入.catch异常捕获
    const goods = await getGoods().catch((err) => {console.error("商品接口异常:", err)});
    if(goods){
        console.log("商品:", JSON.stringify(goods));
        // 处理商品业务逻辑...
    }

}

init();

// 打印结果
// 会员接口异常:xxxxx
// 商品: [{"name":"面包","price":5},{"name":"牛奶","price":6}]

方法三：使用 await-to-js插件库

await-to-js是什么

await-to-js 是一个辅助开发者处理异步错误的库

await-to-js怎么下

# npm安装
npm i await-to-js --save
# yarn安装
yarn add await-to-js

await-to-js怎么写

import to from 'await-to-js'
const init = async () => {
    const [err, data] = await to(getMember())
    if (err){
        console.error("会员接口异常:", err)
        return
    }
    console.log("会员:", data)

    const [err1, data1] = await to(getGoods())
    if (err1){
        console.error("商品接口异常:", err1)
        return
    }
    console.log("商品:", JSON.stringify(data1))
}

// 完整代码
import to from 'await-to-js'
const getMember = async () => {
    return new Promise((resolve, reject) => {
        // 模拟获取会员数据接口异常
        setTimeout(() => {
            // 成功返回
            reject(new Error('会员接口异常'))
        }, 1000)
    })
}

const getGoods = async () => {
    return new Promise((resolve, reject) => {
        // 模拟接口获取商品数据
        setTimeout(() => {
            // 成功返回
            resolve(
                [{
                    name: '面包',
                    price: 5
                },{
                    name: '牛奶',
                    price: 6
                }]
            )
        }, 2000)
    })
}

const init = async () => {
    const [err, data] = await to(getMember())
    if (err){
        console.error("会员接口异常:", err)
        return
    }
    console.log("会员:", data)

    const [err1, data1] = await to(getGoods())
    if (err1){
        console.error("商品接口异常:", err1)
        return
    }
    console.log("商品:", JSON.stringify(data1))
}

init();

// 打印结果
// 会员接口异常:xxxxx
// 商品: [{"name":"面包","price":5},{"name":"牛奶","price":6}]

await-to-js源码分析

/**
 * @param { Promise } promise
 * @param { Object= } errorExt - Additional Information you can pass to the err object
 * @return { Promise }
 */
export function to<T, U = Error>(
  promise: Promise<T>,
  errorExt?: object
): Promise<[U, undefined] | [null, T]> {
  return promise
    .then<[null, T]>((data: T) => [null, data])
    .catch<[U, undefined]>((err: U) => {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt)
        return [parsedError, undefined]
      }

      return [err, undefined]
    })
}

export default to

分析一下：

to方法入参是promise对象和自定义异常

如果没有异常则直接返回null, data，数组第一项是异常信息为null,第二项为正常数据

如果捕获异常在catch中组装err, undefined 错误信息，数组第一项是异常信息为err,第二项数据为null