说一说如何解决async await处理异常问题

·  阅读 2743

写在前面

晚上睡不着,决心还是起来把今天白天工作期间反问一个小伙伴的async&await问题。实际上这个问题之前我就一直想写点什么,只是奈何懒的很,一直没有行动。今天还是忍不住想要吐糟一下,如果有什么说得不对的,欢迎批评指证!

前端项目中异步函数存在的问题

在现在的前端项目中,充斥这大量的异步操作,由于async & await的兴起,导致我今天看到小伙伴有一个项目的代码大量充斥着try catch,代码大概如下:

function request(type) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            type === 'a' ? resolve('resolve') : reject('reject')
        }, 2000);
    })
}

async function getData() {
    try {
        let ret1 = await request('a');
    }catch(error){
        // todo 
    }

    try {
        let ret2 = await request('b');
    } catch (error) {
        // todo
    }

    try {
        let ret3 = await request('c');
    } catch (error) {
        // todo
    }
}
getData();
复制代码

解决办法

在复杂的业务中,这种充斥很多的try catch我实在受不了。势必会想办法解决一下这个问题。 首先需要明确的是 await 后面的promise只有是一个resolve状态,才能正确的拿到其结果。那么要解决这个问题,势必要让异步返回一个resolve状态,但是错误我们不能视而不见,结合nodejs中错误优先,我们可以将错误和结果封装成一个数组返回,那么就有了如下代码了:

/**
 * 高级的处理,接收一个promise,返回一个resolve状态的promise
 * 
 * @param {*} promise 
 */
const hRequest = promise  => promise.then(res => [undefined, res]).catch(err => [err,undefined])


async function getData2() {
    let err,result;
    [err,result] = await hRequest(request('a'));
    console.log(err,result);
    [err,result] = await hRequest(request('b'));
    console.log(err,result);
}
getData2();
复制代码

最后

经过这样一转换,你可以优先判断有没有错误,然后再处理你的业务。

分类:
前端
标签: