增加异步编程内容

docs/chapter02.md

@@ -317,13 +317,7 @@ CSS选择器用以筛选出要添加样式的元素。
 - **样式操作**：className, style属性。
 - **创建/删除节点**：createElement(), appendChild(), removeChild()。
 
-#### 2.2.3.4 异步编程
+#### 2.2.3.4 ES6+特性
-- **回调函数**：理解回调函数。
-- **Promise对象**：解决异步编程中的链式调用。
-- **async/await**：让异步代码看起来更像同步代码。
-- **Fetch API**：替代XMLHttpRequest的新方法。
-
-#### 2.2.3.5 ES6+特性
 - **箭头函数**：简化函数定义。
 
 > ES6允许使用 “箭头”（ => ）定义函数。

docs/chapter03.md

@@ -36,7 +36,174 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
 
 参考[ajax(PPT)](./resources/Ajax-heima.pptx)
 
-#### 3.3.1 XMLHttpRequest对象的使用 (了解)
+
+#### 3.3.1 异步编程
+
+在JavaScript中，异步编程是一个重要的概念，它允许程序在等待某些操作（如网络请求）完成的同时继续执行其他任务。回调函数是实现异步编程的一种早期方式，在现代JavaScript中仍然非常常见，尤其是在一些旧的库或API中。
+
+
+##### 3.3.1.1 回调函数
+
+回调函数是一种函数，作为参数传递给另一个函数，并且在这个函数内部被调用。这种方式常用于处理异步操作的结果。当一个异步操作完成时，通常会调用回调函数，并将结果或者错误作为参数传递给这个回调函数。
+
+
+**示例**
+下面是一个简单的使用回调函数进行异步操作的例子：
+
+```javascript
+function doSomethingAsync(callback) {
+    setTimeout(() => {
+        const result = '这是结果';
+        callback(result); // 在异步操作完成后调用回调函数
+    }, 1000);
+}
+
+// 使用回调函数
+doSomethingAsync((result) => {
+    console.log('得到结果: ' + result);
+});
+```
+在这个例子中，`doSomethingAsync` 函数模拟了一个耗时1秒的异步操作。当这个操作完成时，它通过调用 `callback` 函数来通知外部世界，并将结果传递给这个回调函数。
+
+**回调地狱**
+
+随着应用程序变得越来越复杂，回调函数可以导致所谓的“回调地狱”（Callback Hell），即嵌套的回调函数层次过深，使得代码难以阅读和维护。例如：
+
+```javascript
+doSomethingAsync((result1) => {
+    doAnotherThingAsync(result1, (result2) => {
+        doThirdThingAsync(result2, (result3) => {
+            console.log('所有操作完成');
+        });
+    });
+});
+```
+
+为了解决这个问题，JavaScript 社区引入了 `Promise` 和 `async/await`，这些特性可以帮助我们以更简洁的方式编写异步代码。
+
+##### 3.3.1.2 Promise对象
+
+`Promise` 是 JavaScript 中一种用于处理异步操作的模式，它旨在简化异步编程并解决回调地狱的问题。`Promise` 提供了一种更加结构化的处理异步操作的方法，使得代码更易读和维护。
+
+一个 `Promise` 对象代表了一个最终可能会完成或失败的异步操作，并且它的完成（或失败）可能会发生在当前时刻，也可能是在未来的某个时刻。Promise 可以处于以下三种状态之一：
+- **pending**（未定）：初始状态，既不是成功也不是失败。
+- **fulfilled**（已成功）：意味着操作已完成，并且有一个值。
+- **rejected**（已失败）：意味着操作出现了错误，并且有一个原因（通常是错误对象）。
+
+
+**创建 Promise**
+
+创建一个 `Promise` 对象需要提供一个构造函数，该构造函数接受一个带有两个参数的执行器函数：`resolve` 和 `reject`。这两个函数用来改变 `Promise` 的状态：
+- `resolve(value)`：当异步操作成功时调用，并传入结果值。
+- `reject(reason)`：当异步操作失败时调用，并传入失败原因（通常是 `Error` 类型的一个实例）。
+
+**示例**
+
+这里是一个创建 `Promise` 并使用 `setTimeout` 模拟异步操作的例子：
+
+```javascript
+const promise = new Promise((resolve, reject) => {
+    setTimeout(() => {
+        resolve('异步操作成功');
+    }, 1000);
+});
+
+promise.then(result => {
+    console.log(result); // 输出 "异步操作成功"
+}).catch(error => {
+    console.error(error);
+});
+```
+
+**链式调用**
+`Promise` 的一个强大之处在于你可以链接多个 `.then()` 方法来指定一个操作序列。每个 `.then()` 方法返回一个新的 `Promise`，这允许你在链式调用中继续处理数据。
+
+```javascript
+new Promise(resolve => {
+    setTimeout(() => resolve(1), 1000);
+}).then(result => {
+    console.log(result); // 输出 "1"
+    return result * 2;
+}).then(newResult => {
+    console.log(newResult); // 输出 "2"
+});
+```
+
+**错误处理**
+如果在某个 `.then()` 方法中抛出了异常，或者之前的 `Promise` 被拒绝 (`rejected`)，那么链式调用中的下一个 `.catch()` 方法就会捕获到这个错误。如果没有显式的 `.catch()` 处理错误，那么未处理的 `Promise` 拒绝会被作为全局错误处理。
+
+```javascript
+new Promise((resolve, reject) => {
+    setTimeout(() => reject(new Error('出错了')), 1000);
+}).then(result => {
+    console.log(result);
+}).catch(error => {
+    console.error(error.message); // 输出 "出错了"
+});
+```
+
+> `Promise` 是一种现代的异步编程模式，它可以让我们以更加结构化的方式编写代码。它不仅解决了回调地狱的问题，还提供了强大的错误处理机制。
+
+
+##### 3.3.1.3  async异步函数/await表达式
+`async/await` 是 JavaScript 中用于简化异步代码编写的一种语法糖。它使得异步代码看起来更像同步代码，提高了代码的可读性和可维护性。
+
+**async 函数**
+
+`async` 关键字用于声明一个函数为异步函数。一旦一个函数被声明为异步函数，它将总是返回一个 `Promise`。
+
+```javascript
+async function fetchUser() {
+  // 返回一个模拟的 Promise
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve('User data'), 2000);
+  });
+}
+
+fetchUser().then(data => console.log(data)); // 输出: User data
+```
+
+**await 表达式**
+
+`await` 关键字只能出现在 `async` 函数内部，它可以让 JavaScript 等待直到一个 `Promise` 完成（解决或拒绝）。`await` 后面跟的是一个 `Promise`，表达式的值就是 `Promise` 解决后的值。
+
+```javascript
+async function fetchData() {
+  try {
+    const response = await fetchUser();
+    console.log(response); // 输出: User data
+  } catch (error) {
+    console.error('Failed to fetch user:', error);
+  }
+}
+
+fetchData();
+```
+
+**异常处理**
+
+如果 `Promise` 被拒绝（rejected），或者在 `await` 表达式之前或之后的代码中抛出了异常，可以通过在 `async` 函数内使用 `try...catch` 语句来捕获这些异常。
+
+```javascript
+async function example() {
+  try {
+    const result = await someAsyncFunctionThatMightFail();
+    console.log(result);
+  } catch (error) {
+    console.error('Caught an exception:', error);
+  }
+}
+```
+
+**注意事项**
+
+- `await` 只能出现在 `async` 函数内。
+- 如果 `async` 函数内没有任何 `await` 表达式，那么它等同于一个普通函数，只是返回了一个已经解决的 `Promise`。
+- 当 `async` 函数内的所有 `await` 操作都没有拒绝时，整个 `async` 函数会返回一个解决的 `Promise`；如果有任何 `await` 操作被拒绝或者抛出了异常，则会返回一个被拒绝的 `Promise`。
+
+
+
+#### 3.3.2 XMLHttpRequest对象的使用 (了解)
 - **基本用法：** 创建对象、设置请求类型、发送请求、处理响应。
 - **事件监听：** 监听 `onreadystatechange` 事件来获取服务器响应的状态。
 - **请求方法：** `open` 方法设置请求类型和URL，`send` 方法发送请求。
@@ -70,7 +237,7 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
     // 发送请求
     xhr.send(); 
 ```
-#### 3.3.2 Fetch API和Promise (掌握)
+#### 3.3.3 Fetch API (掌握)
 - **Fetch API：** 是一个现代替代 XMLHttpRequest 的 API，提供了更简洁的语法和基于 Promise 的接口。
 - **基本语法：** `fetch(url)`返回一个 Promise 对象。
 
@@ -130,7 +297,7 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
 - **处理响应：** 使用`.then()`处理响应，如`.json()`或`.text()`。
 - **错误处理：** 使用`.catch()`处理网络错误或其他异常。
 
-#### 3.3.3 使用jQuery进行AJAX调用 (掌握)
+#### 3.3.4 使用jQuery进行AJAX调用 (掌握)
 - **$.ajax()：** jQuery 的 AJAX 方法，提供简单的语法糖。
 - **$.get() 和 $.post()：** 简化 GET 和 POST 请求的语法。
 - **$.getJSON()：** 专门用于获取 JSON 数据的快捷方法。