diff --git a/docs/chapter02.md b/docs/chapter02.md index 3745d21..1ae8474 100644 --- a/docs/chapter02.md +++ b/docs/chapter02.md @@ -317,13 +317,7 @@ CSS选择器用以筛选出要添加样式的元素。 - **样式操作**：className, style属性。 - **创建/删除节点**：createElement(), appendChild(), removeChild()。 -#### 2.2.3.4 异步编程 -- **回调函数**：理解回调函数。 -- **Promise对象**：解决异步编程中的链式调用。 -- **async/await**：让异步代码看起来更像同步代码。 -- **Fetch API**：替代XMLHttpRequest的新方法。 - -#### 2.2.3.5 ES6+特性 +#### 2.2.3.4 ES6+特性 - **箭头函数**：简化函数定义。 > ES6允许使用 “箭头”（ => ）定义函数。 diff --git a/docs/chapter03.md b/docs/chapter03.md index 899e989..613201e 100644 --- a/docs/chapter03.md +++ b/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 数据的快捷方法。