async 和 await 是 JavaScript(特别是 ES2017 及更高版本)中用于处理异步操作的关键字。它们使得异步代码看起来、写起来更像同步代码,从而提高了代码的可读性和可维护性。
async
async 是一个函数修饰符,用于声明一个函数是异步的。一个 async 函数总是返回一个 Promise。如果函数返回一个非 Promise 值,JavaScript 会自动将其包装在一个 Promise 中。
示例:
async function exampleAsyncFunction() { return "Hello, Async!"; } exampleAsyncFunction().then(result => console.log(result)); // 输出 "Hello, Async!"
await
await 是一个操作符,它只能在 async 函数内部使用。await 会暂停 async 函数的执行,并等待 Promise 解决(resolve)或拒绝(reject),然后恢复 async 函数的执行并返回解决的值。如果 Promise 被拒绝,await 表达式会抛出一个错误。
示例:
async function fetchData() { let response = await fetch('https://api.example.com/data'); let data = await response.json(); return data; } fetchData().then(data => console.log(data)).catch(error => console.error(error));
在这个例子中,fetch 函数返回一个 Promise,我们使用 await 等待这个 Promise 解决,然后获取返回的响应对象。接着,我们使用 response.json() 方法(也返回一个 Promise)来获取 JSON 数据,并再次使用 await 等待这个 Promise 解决。最后,我们返回获取到的数据。
注意事项
- await 只能在 async 函数内部使用。
- await 会暂停 async 函数的执行,但不会阻塞整个线程或进程。JavaScript 仍然是单线程的,但 await 允许其他代码(如事件监听器或定时器回调)在 await 等待期间运行。
- 如果在 async 函数外部使用 await,会导致语法错误。
- 使用 try...catch 来捕获 await 表达式可能抛出的错误是一个好习惯。