ES6 中的 async 和 await 用法详解
2023-10-16 07:20:13
前言
在开始学习之前，我们想要告诉您的是，本文章是对阮一峰《ECMAScript6 入门》一书中 "async 和 await" 章节的总结，如果您已掌握下面知识事项，则可跳过此环节直接进入题目练习。
- JavaScript 的基本语法
- Promise 的用法
- 异步编程的概念
一、async 函数
async 函数是 ES6 中引入的一种新的函数类型，它允许我们使用 await 来等待异步操作的完成。
async 函数的定义方式与普通函数类似，只是在函数名前面加上 async 关键字。例如：
async function myAsyncFunction() {
// 异步操作
}
async 函数可以返回一个 Promise 对象，也可以返回一个普通的值。如果 async 函数返回一个 Promise 对象，那么 await 关键字就会等待这个 Promise 对象完成，然后继续执行后面的代码。如果 async 函数返回一个普通的值，那么 await 关键字就会直接返回这个值。
二、await 关键字
await 关键字用于等待异步操作的完成。它只能在 async 函数中使用。
await 关键字后面的表达式必须是一个 Promise 对象。当 await 关键字遇到一个 Promise 对象时，它就会等待这个 Promise 对象完成，然后继续执行后面的代码。
例如，以下代码演示了如何使用 await 关键字来等待一个 Promise 对象的完成：
async function myAsyncFunction() {
const result = await fetch('https://example.com/api/data');
const data = await result.json();
return data;
}
这段代码首先使用 fetch() 函数来获取一个 API 的数据，然后使用 await 关键字来等待这个 API 请求的完成。当 API 请求完成后，这段代码会将 API 的响应数据解析成 JSON 格式，然后返回这个 JSON 数据。
三、async 和 await 的使用场景
async 和 await 可以用于任何需要异步编程的场景。例如，以下是一些常见的 async 和 await 的使用场景：
- 获取 API 的数据
- 发送 HTTP 请求
- 读写文件
- 定时器
- 事件监听器
四、async 和 await 的优点
async 和 await 有很多优点，其中包括：
- 使异步编程变得更加容易
- 提高代码的可读性和可维护性
- 减少回调函数的嵌套
- 避免 Promise 对象的链式调用
五、async 和 await 的局限性
async 和 await 也有少数局限性，其中包括：
- 只能在 async 函数中使用
- 可能会导致性能问题
- 不支持 IE 浏览器
六、总结
async 和 await 是 ES6 中非常重要的两个关键字，它们可以帮助我们更轻松地编写异步代码。通过使用 async 和 await，我们可以避免回调函数的嵌套和 Promise 对象的链式调用，从而使代码更加易读和可维护。
七、练习题
- 使用 async 和 await 来编写一个函数，该函数获取一个 URL 的数据并将其返回。
- 使用 async 和 await 来编写一个函数，该函数发送一个 HTTP 请求并将其响应数据返回。
- 使用 async 和 await 来编写一个函数，该函数读写一个文件。
- 使用 async 和 await 来编写一个函数，该函数创建一个定时器并返回定时器 ID。
- 使用 async 和 await 来编写一个函数，该函数添加一个事件监听器并返回事件监听器 ID。
八、参考答案
async function getData(url) {
const response = await fetch(url);
const data = await response.json();
return data;
}
2. ```
async function sendRequest(url, data) {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
const responseData = await response.json();
return responseData;
}
async function readFile(path) {
const data = await Deno.readFile(path);
return data;
}
async function writeFile(path, data) {
await Deno.writeFile(path, data);
}
4. ```
async function createTimer(delay) {
const timerId = setTimeout(() => {
console.log('Timer fired!');
}, delay);
return timerId;
}
async function addEventListener(element, event, callback) {
const listenerId = element.addEventListener(event, callback);
return listenerId;
}
