深入掌握 ECMAScript 2020：解析 async/await 的使用方法及常见错误及调试方式
在前端开发中, 由于异步操作的普遍存在, 因此ES6中推出了 async/await这一常用的异步操作方式, 它有着比较简洁的代码风格和易于管理异步代码的方式, 这是一种语法糖, 底层依旧是promise。
下面来深入学习 async/await 的使用方法及常见错误及调试方式。
1. async/await 的使用方法
使用 async/await, 需要借助async和await两个关键字, 在函数前面加上async, 表示这个函数是异步的, 在调用异步函数前面加上await, 表示等待函数内部的异步操作执行完毕后再进行后面的操作。举个例子，假设我们有一个异步请求的方法request：
-- -------------------- ---- ------- ----- -------- ------------ - --- -------- - ----- ----------- -- ------------- - --- ---- - ----- ---------------- ------ ----- - ---- - ----- --- ----------------------- - -展开代码
我们可以看到，这个方法前面有一个 async 关键字，里面有两个异步操作：fetch 和 response.json()，通过加上 await 操作符，让这两个异步操作变成了同步的样子，按正常顺序运行。
2. async/await 的常见错误及调试方式
在使用 async/await 时，常见的错误包括：
2.1. 忘记使用 async 关键字
如果一个函数内部使用了 await 关键字，但没有使用 async 关键字，则会报错，例如：
function foo() { let result = await someOtherFunction(); // 下面的代码不会执行 console.log(result); } foo(); // SyntaxError: await is only valid in async function
2.2. 在异步函数外部使用 await 关键字
await 只能在异步函数中使用，如果在异步函数的外部使用 await 关键字，会报错，例如：
let result = await someOtherFunction(); // SyntaxError: await is only valid in async function
2.3. 异步函数内未捕获异常
如果异步函数内部出现异常，但没有进行捕获，会导致代码中断，例如：
async function foo() { let result = await someOtherFunction(); throw new Error('error'); } foo() .then(result => console.log(result)) .catch(err => console.error(err)); // Uncaught (in promise) Error: error
解决方法是在异步函数内部进行异常捕获：
-- -------------------- ---- ------- ----- -------- ----- - --- - --- ------ - ----- -------------------- ----- --- --------------- - ----- ----- - ------------------- - - ----- ------------ -- -------------------- ---------- -- -------------------- -- ------ -----展开代码
2.4. 统一异常处理
如果在异步函数中进行多次请求，可以使用 Promise.all() 等方式统一处理异常，例如：
-- -------------------- ---- ------- ----- -------- ----- - --- - --- --------- -------- - ----- --------------------------- ---------------- -------------------- --------- - ----- ----- - ------------------- - - ------展开代码
2.5. 使用 try-catch 捕获异步操作异常
如果在异步函数中使用了 try-catch，只能捕获到异步操作的语法异常，而不能捕获到异步操作的运行时异常，例如：
-- -------------------- ---- ------- ----- -------- ----- - --- - --- -------- - ----- ------------------------------------ -- --- - ----- ----- - ------------------- -- ---- ------------ ---------- ----- - -- ---- -- -------- - - - ------展开代码
解决方法是使用 Promise.reject() 捕获运行时异常：
-- -------------------- ---- ------- ----- -------- ----- - --- - --- -------- - ----- ------------------------------------ -- -------------- - ----- --- ----------------------- - --- ------ - ----- ---------------- -------------------- - ----- ----- - ------------------- -- -- ------ --- - - ------展开代码
3. 示例代码
下面给出一个完整的示例代码，用于说明 async/await 的使用方法及常见错误及调试方式：
-- -------------------- ---- ------- ----- -------- ------------ - --- -------- - ----- ----------- -- ------------- - --- ---- - ----- ---------------- ------ ----- - ---- - ----- --- ----------------------- - - ----- -------- ----- - --- - --- ------ - ----- --------------------------------- -------------------- - ----- ----- - ------------------- - - ------展开代码
以上就是 async/await 的使用方法及常见错误及调试方式的详细介绍，希望能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c6f28acc0f7239cde6caac
