我的 React 之旅：第 9 天

我今天學到了什麼：

1. 非同步 JavaScript：

定義：非同步程式設計允許 JavaScript 執行任務而無需等待上一個任務完成。
使用案例：進行 API 呼叫或其他耗時的操作。
好處：透過在等待回應時執行其他任務來提高效率。

1. 回調：

• 定義：回呼是作為參數傳遞給另一個函數的函數，稍後在需要時執行。
• 挑戰：嵌套回呼會造成回呼地獄，使程式碼難以閱讀和維護。
• 解決方案：引入 Promise 來簡化非同步處理。

1. 承諾：
2. 定義：Promise 更乾淨地處理非同步操作並避免回調地獄。

• 承諾狀態：
  半島：初始狀態，等待結果。
  已解決：操作成功。
  已拒絕：操作失敗。

• 方法：

.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中文網其他相關文章！