本篇文章介绍在使用 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 bottom
let 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 promises
let 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 function
async 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中的错误，Jesse Warden - NPM 包 - await-to-js
结论
async/await 的语法很简洁，但你还是要处理异步函数里的抛出的错误。
除非你实现了自定义错误类（custom error classes），否则很难处理 Promise.then 链中的 .catch 错误处理。
使用 handle 工具函数，我们可以避免 Unhandled promise rejection 报错，还能细粒度的处理错误。
（正文完）
作者：zhangbao90s
链接：https://juejin.im/post/5e535624518825496e784ccb
网友评论