[译] 在 async/await 中更好的处理错误
发布于 5 年前 作者 banyungong 4754 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

原文链接:Better error handling with async/await,by Sobio Darlington

本篇文章介绍在使用 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, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">posts</span>) </span>{
  showUserProfilePage(user, friendsOfUser, posts, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// Do something here</span>

  });
});

}); });

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](/user/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](/user/param) {Promise} promise
 * [@returns](/user/returns) {Promise} [ data, undefined ]
 * [@returns](/user/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 报错,还能细粒度的处理错误。

(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。

(完)

内容来源于网络

原文出处及转载信息见文内详细说明,如有侵权,请联系 vueclub@126.com 删除

回到顶部