写在前面
晚上睡不着,决心还是起来把今天白天工作期间反问一个小伙伴的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();
复制代码
最后
经过这样一转换,你可以优先判断有没有错误,然后再处理你的业务。