本篇文章介绍在使用 async
/await
语法时,一种更好的处理错误的方式。在此之前,大家也需要先了解下 Promise 的工作原理。
从回调地狱到 Promise
回调地狱(callback Hell),也称为“末日金字塔(Pyramid of Doom)”,是在开发者代码中看到的一种反模式(anti-pattern),这种异步编程方式并不明智。- Colin Toh
由于回调函数的嵌套,回调地狱 会使你的代码向右排布而不是垂直向下排版。
为了更直观的反映回调函数,这里举了一个例子。
用户资料案例 1
// Code that reads from left to right// instead of top to bottomlet user;let friendsOfUser;getUser(userId, function(data) { user = data; getFriendsOfUser(userId, function(friends) { friendsOfUser = friends; getUsersPosts(userId, function(posts) { showUserProfilePage(user, friendsOfUser, posts, function() { // Do something here }); }); });});
Promise
Promise 是 ES2015(即俗称的 ES6)引入的一个语言特性,用来更好的处理异步操作,避免回调地狱的出现。
下例中使用 Promise 的 .then
链来解决回调地狱问题。
用户资料案例 2
// A solution with promiseslet user;let friendsOfUser;getUser().then(data => { user = data; return getFriendsOfUser(userId);}).then(friends => { friendsOfUser = friends; return getUsersPosts(userId);}).then(posts => { showUserProfilePage(user, friendsOfUser, posts);}).catch(e => console.log(e));
Promise 的处理方式更加干净和可读。
async/await Promise
async
/
await
是一种特殊的语法,可以用更简洁的方式处理 Promise。在
funtion
前加
async
关键字就能将函数转换成 Promise。
所有的 async 函数的返回值都是 Promise。
例子
// Arithmetic addition functionasync function add(a, b) { return a + b;}// Usage:add(1, 3).then(result => console.log(result));// Prints: 4
使用 async
/await
,可以让“用户资料案例 2”看起来更棒。
用户资料案例 3
async function userProfile() { let user = await getUser(); let friendsOfUser = await getFriendsOfUser(userId); let posts = await getUsersPosts(userId); showUserProfilePage(user, friendsOfUser, posts);}
等等!有个问题
在“用户资料案例 3”中,如果有一个 Promise reject 了,就会抛出 Unhandled promise rejection
异常。
在此之前写的代码都没有考虑 Promise reject 的情况。未处理的 reject Promise 过去会以静默的方式失败,这可能会使调试成为噩梦。
不过现在,Promise reject 时会抛出一个错误了。
Google Chrome 抛出的错误:
VM664:1 Uncaught (in promise) Error
Node 抛出的错误则类似这样:
(node:4796) UnhandledPromiseRejectionWarning: Unhandled promise rejection (r ejection id: 1): Error: spawn cmd ENOENT
[1] (node:4796) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code
。
No promise should be left uncaught(每个 Promise 都要使用
.catch
处理). - Javascript
注意,“用户资料案例 2”中的 .catch
方法。如果没有写 .catch
块的话,JavaScript 会在 Promise reject 的时候抛出 Unhandled promise rejection
错误。
处理“用户资料案例 3”中的问题比较容易。只要使用 try...catch
块包装下 await
语句就能避免 Unhandled promise rejection
错误了。
用户资料案例 4
async function userProfile() { try { let user = await getUser(); let friendsOfUser = await getFriendsOfUser(userId); let posts = await getUsersPosts(userId); showUserProfilePage(user, friendsOfUser, posts); } catch(e) { console.log(e); }}
问题解决了!
但是错误处理还可以再优雅点吗?
我怎么知道报错是来自哪一个异步请求的呢?可以在异步请求上使用.catch
方法来处理错误。
用户资料案例 5
let user = await getUser().catch(e => console.log('Error: ', e.message));let friendsOfUser = await getFriendsOfUser(userId).catch(e => console.log('Error: ', e.message));let posts = await getUsersPosts(userId).catch(e => console.log('Error: ', e.message));showUserProfilePage(user, friendsOfUser, posts);
上面的解决方案将处理来自请求的单个错误,但是会混合使用多种模式。应该有一种更干净的方法来使用 async
/await
而不使用 .catch
方法(嗯,如果你不介意的话,可以这样做)。
我的更好的 async/await 错误处理方案
用户资料案例 6
/** * @description ### Returns Go / Lua like responses(data, err) * when used with await * * - Example response [ data, undefined ] * - Example response [ undefined, Error ] * * * When used with Promise.all([req1, req2, req3]) * - Example response [ [data1, data2, data3], undefined ] * - Example response [ undefined, Error ] * * * When used with Promise.race([req1, req2, req3]) * - Example response [ data, undefined ] * - Example response [ undefined, Error ] * * @param {Promise} promise * @returns {Promise} [ data, undefined ] * @returns {Promise} [ undefined, Error ] */const handle = (promise) => { return promise .then(data => ([data, undefined])) .catch(error => Promise.resolve([undefined, error]));}async function userProfile() { let [user, userErr] = await handle(getUser()); if(userErr) throw new Error('Could not fetch user details'); let [friendsOfUser, friendErr] = await handle( getFriendsOfUser(userId) ); if(friendErr) throw new Error('Could not fetch user\'s friends'); let [posts, postErr] = await handle(getUsersPosts(userId)); if(postErr) throw new Error('Could not fetch user\'s posts'); showUserProfilePage(user, friendsOfUser, posts);}
这里使用了一个工具函数 handle
,如此就可以避免 Unhandled promise rejection
报错,还能细粒度的处理错误。
解释
handle
函数接受一个 Promise 对象作为参数,并总是 resolve 它,以
[data|undefined, Error|undefined]
的形式返回结果。
- 如果 Promise resolve 了,
handle
函数返回[data, undefined]
; - 如果 Promise reject 了,
handle
函数返回[undefined, Error]
。
结论
async
/
await
的语法很简洁,但你还是要处理异步函数里的抛出的错误。除非你实现了自定义错误类(custom error classes),否则很难处理
Promise.then
链中的
.catch
错误处理。使用
handle
工具函数,我们可以避免
Unhandled promise rejection
报错,还能细粒度的处理错误。
(转载)
作者:zhangbao90s
原文链接:https://juejin.im/post/5e535624518825496e784ccb
![6177a88fb31ec09cee63f4b729f1ffd6.png](https://i-blog.csdnimg.cn/blog_migrate/6d6a6212751da67b5e67504d5abc6d12.png)
![9dabe80474776bed264a340c489d4725.gif](https://i-blog.csdnimg.cn/blog_migrate/7c31af8c37f9605b1bd607e880c2cb6e.gif)