增加异步编程内容

This commit is contained in:
many2many 2024-10-06 11:55:25 +08:00
parent 8fb38039ef
commit 71fa853257
2 changed files with 171 additions and 10 deletions

View File

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

View File

@ -36,7 +36,174 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
参考[ajax(PPT)](./resources/Ajax-heima.pptx) 参考[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` 事件来获取服务器响应的状态。 - **事件监听:** 监听 `onreadystatechange` 事件来获取服务器响应的状态。
- **请求方法:** `open` 方法设置请求类型和URL`send` 方法发送请求。 - **请求方法:** `open` 方法设置请求类型和URL`send` 方法发送请求。
@ -70,7 +237,7 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
// 发送请求 // 发送请求
xhr.send(); xhr.send();
``` ```
#### 3.3.2 Fetch API和Promise (掌握) #### 3.3.3 Fetch API (掌握)
- **Fetch API** 是一个现代替代 XMLHttpRequest 的 API提供了更简洁的语法和基于 Promise 的接口。 - **Fetch API** 是一个现代替代 XMLHttpRequest 的 API提供了更简洁的语法和基于 Promise 的接口。
- **基本语法:** `fetch(url)`返回一个 Promise 对象。 - **基本语法:** `fetch(url)`返回一个 Promise 对象。
@ -130,7 +297,7 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- **处理响应:** 使用`.then()`处理响应,如`.json()`或`.text()`。 - **处理响应:** 使用`.then()`处理响应,如`.json()`或`.text()`。
- **错误处理:** 使用`.catch()`处理网络错误或其他异常。 - **错误处理:** 使用`.catch()`处理网络错误或其他异常。
#### 3.3.3 使用jQuery进行AJAX调用 (掌握) #### 3.3.4 使用jQuery进行AJAX调用 (掌握)
- **$.ajax()** jQuery 的 AJAX 方法,提供简单的语法糖。 - **$.ajax()** jQuery 的 AJAX 方法,提供简单的语法糖。
- **$.get() 和 $.post()** 简化 GET 和 POST 请求的语法。 - **$.get() 和 $.post()** 简化 GET 和 POST 请求的语法。
- **$.getJSON()** 专门用于获取 JSON 数据的快捷方法。 - **$.getJSON()** 专门用于获取 JSON 数据的快捷方法。