1月21日java假期学习读书笔记

一、学习目标
深入理解Promise的链式调用和错误处理机制。
掌握Async/Await的高级应用，包括错误处理和并发执行。
通过实际练习，编写复杂的异步JavaScript代码。
了解异步编程在实际开发中的应用场景。
二、学习内容
（一）Promise的链式调用
链式调用的定义
Promise的then()方法返回一个新的Promise对象，可以链式调用，实现多个异步操作的顺序执行。
链式调用的示例
JavaScript
复制
function fetchData1() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data from fetchData1");
}, 1000);
});
}

function fetchData2(data) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(${data} and Data from fetchData2);
}, 1000);
});
}

fetchData1()
.then(data => fetchData2(data))
.then(finalData => console.log(finalData)) // 输出：Data from fetchData1 and Data from fetchData2
.catch(error => console.error(error));
链式调用的优势
代码更加清晰，避免了回调地狱（Callback Hell）。
每个then()可以独立处理异步操作的结果。
（二）Promise的错误处理
错误处理机制
使用catch()方法捕获Promise链中的错误。
错误可以在链的任何位置被捕获，并通过catch()处理。
错误处理示例
JavaScript
复制
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const errorOccurred = true; // 假设发生错误
if (errorOccurred) {
reject(new Error("Something went wrong!"));
} else {
resolve("Data fetched successfully");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error.message)); // 输出：Something went wrong!
finally()方法
finally()方法用于在Promise完成（无论是成功还是失败）后执行清理操作。
JavaScript
复制
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error.message))
.finally(() => console.log("Promise completed")); // 输出：Promise completed
（三）Async/Await的高级应用
错误处理
使用try...catch块捕获async函数中的错误。
JavaScript
复制
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching data:", error);
}
}

fetchData();
并发执行
使用Promise.all()同时执行多个异步操作，并等待它们全部完成。
JavaScript
复制
async function fetchMultipleData() {
try {
const [data1, data2] = await Promise.all([
fetch("https://api.example.com/data1").then(res => res.json()),
fetch("https://api.example.com/data2").then(res => res.json())
]);
console.log(data1, data2);
} catch (error) {
console.error("Error fetching multiple data:", error);
}
}

fetchMultipleData();
（四）实际练习：异步加载和显示数据
HTML结构
HTML
复制

异步加载数据

JavaScript代码 JavaScript 复制 async function fetchData() { try { const response = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await response.json(); displayData(data); } catch (error) { console.error("Error fetching data:", error); } }

function displayData(data) {
const container = document.getElementById("dataContainer");
data.forEach(item => {
const div = document.createElement("div");
div.textContent = Title: ${item.title};
container.appendChild(div);
});
}

fetchData();
三、学习心得
Promise链式调用的强大功能
通过链式调用，可以清晰地组织多个异步操作，避免嵌套回调的复杂性。
错误处理机制（catch()）使代码更加健壮。
Async/Await的简洁性
async/await使异步代码看起来像同步代码，提高了代码的可读性。
使用try...catch可以方便地处理异步操作中的错误。
并发执行的重要性
使用Promise.all()可以同时执行多个异步操作，提高程序的效率。
并发执行适用于多个独立的异步任务。
实践的重要性
通过实际编写异步代码，我更好地理解了Promise和Async/Await的使用方法。
实践可以帮助快速发现和解决问题，加深对知识点的理解。