如何使用 ES6 中的异步和 await 进行异常处理
在前端开发中，异步编程是经常使用的技术。在 ES6 中，我们可以使用 Promise、async/await 等语法来简化异步编程，并减少回调函数带来的代码可读性问题。但有时候异步任务会出错，如果不处理异常会直接导致程序崩溃。使用 try...catch 可以捕获异步异常，但使用 async/await 进行异常处理是更简单、更优雅的方式。
异步和 await 是 ES6 中新增的特性，可以帮助我们更好地处理异步任务。异步函数定义方式如下：
async function foo() {
}在异步函数内部，可以使用 await 关键字来等待异步操作的结果。例如：
async function foo() {
const data = await fetch(url); // 等待 fetch 的结果
console.log(data);
}如果异步操作失败，则会抛出一个异常。这时我们可以使用 try...catch 语句块来捕获异常。例如：
async function foo() {
try {
const data = await fetch(url); // 等待 fetch 的结果
console.log(data);
} catch (error) {
console.error(error);
}
}在上面的代码中，当 fetch 函数抛出异常时，会被 catch 语句块捕获，并使用 console.error 输出错误信息。
可以看到，使用 async 和 await 进行异步操作的异常处理是非常简洁、优雅的。下面通过一个实际的案例来更加深入地理解异步和 await 的异常处理。
假如我们现在要编写一个用于查询 GitHub 的 API，首先需要使用 fetch 函数请求 API，然后处理响应数据。其中 fetch 函数可能会因为网络问题等原因抛出异常，响应数据也可能会因为数据格式错误而导致我们无法进行下一步处理。下面是使用 async 和 await 进行异常处理的完整代码示例：
-- -------------------- ---- -------
----- -------- --------------------- -
----- --- - ----------------------------------------------------------
--- -
----- -------- - ----- ----------- -- ----
----- ------------ - ----- ---------------- -- ------
-- ---------------------- -
-- ------
----- --- ----------------------------
-
----- ----- - -------------------
------ -------------- -- --
----- ----------
--------- -------------
----
- ----- ------- -
---------------------
------ ---
-
-在上面的代码中，我们首先使用 try...catch 语句块捕获异常。然后，我们使用 fetch 函数发送请求，使用 await 等待响应结果，并使用 response.json 方法解析响应数据。我们还添加了一个检查代码，当搜索结果中有错误信息时，抛出一个 Error 对象，这个对象会被 catch 语句块捕获。最后，如果出现异常我们会在控制台输出错误信息，并返回一个空数组作为搜索结果。如果一切正常，我们会对搜索结果进行处理并返回一个新的对象数组。
总结
在开发中，异步编程是很常见的场景，但要注意处理异步操作中的异常情况。在 ES6 中，我们可以使用 Promise、async/await 等语法来简化异步编程，并通过 try...catch 等语句块来处理异常。使用 async 和 await 进行异步操作的异常处理是非常简洁、优雅的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f26b47d4982a6eb826a6d