我的 React 之旅：第 9 天

我今天学到了什么：

1. 异步 JavaScript：

定义：异步编程允许 JavaScript 执行任务而无需等待上一个任务完成。
使用案例：进行 API 调用或其他耗时的操作。
好处：通过在等待响应时运行其他任务来提高效率。

1. 回调：

• 定义：回调是作为参数传递给另一个函数的函数，稍后在需要时执行。
• 挑战：嵌套回调会造成回调地狱，使代码难以阅读和维护。
• 解决方案：引入 Promise 来简化异步处理。

1. 承诺：
2. 定义：Promise 更干净地处理异步操作并避免回调地狱。

• 承诺状态：
  Pending：初始状态，等待结果。
  已解决：操作成功。
  已拒绝：操作失败。

• 方法：

.then()：当 Promise 得到解决时执行。
.catch(): 当promise被拒绝时执行。
.finally(): 无论promise是resolved还是rejected都会执行。

承诺示例

const fetchData = () => {
    return new Promise((resolve, reject) => {
        let success = true; // Simulating success or failure
        setTimeout(() => {
            success ? resolve("Data fetched!") : reject("Failed to fetch data.");
        }, 2000);
    });
};

fetchData()
    .then((data) => console.log(data)) // Output: Data fetched!
    .catch((error) => console.error(error))
    .finally(() => console.log("Operation completed."));

1. 异步/等待

• 目的：建立在 Promise 之上，以实现更清晰、更具可读性的代码。
• 异步函数：声明一个处理异步操作的函数。
• Await 关键字：暂停函数执行，直到 Promise 解决或拒绝。

异步/等待示例：

const fetchDataAsync = async () => {
    try {
        const data = await fetchData(); // Wait for the promise to resolve
        console.log(data);             // Output: Data fetched!
    } catch (error) {
        console.error(error);
    } finally {
        console.log("Operation completed.");
    }
};

fetchDataAsync();

5.现实生活类比：

• 承诺： 待处理：在线订购披萨并等待送货。 解决：披萨到了。你吃得很开心。 拒绝：披萨未送达。你抱怨。
• 异步/等待：您在等待披萨到达的同时继续读书。

6.Promise.all

• 用途：同时执行多个promise并等待所有完成。 例子：

const promise1 = Promise.resolve("Task 1 completed");
const promise2 = Promise.resolve("Task 2 completed");

Promise.all([promise1, promise2])
    .then((results) => console.log(results)) // Output: ["Task 1 completed", "Task 2 completed"]
    .catch((error) => console.error(error));

1. 使用 Fetch API 进行异步/等待

• Fetch：在 JavaScript 中发出 HTTP 请求的现代方法。 例子：

const fetchDataFromAPI = async () => {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchDataFromAPI();

亮点

• Promise 清理异步操作并改进错误处理。
• Async/Await 使代码更容易编写和理解，特别是对于链式 Promises。
• Promise.all 对于并行运行多个异步任务非常有用。

到目前为止，这是一次美好的旅程。

第10天着火

以上是我的 React 之旅：第 9 天的详细内容。更多信息请关注PHP中文网其他相关文章！