JavaScript 的非同步特性對於創建用戶友好、響應迅速且高效的應用程式至關重要。了解非同步程式設計的基本想法(例如回調、promise 和 async/await)對於成功導航至關重要。本手冊將剖析這些想法並研究它們的應用、優點和缺點。
同步程式設計:
同步程式碼範例:
function task1() { console.log("Task 1 started"); for (let i = 0; i < 1e9; i++); // Simulating a long task console.log("Task 1 completed"); } function task2() { console.log("Task 2 started"); for (let i = 0; i < 1e9; i++); // Simulating a long task console.log("Task 2 completed"); } task1(); // Executes first task2(); // Executes after task1 is completed
非同步程式設計:
定義:回呼是作為參數傳遞給另一個函數的函數,在任務完成後執行。
範例:
function fetchData(callback) { console.log("Fetching data..."); setTimeout(() => { const data = "Data received"; // Simulate fetched data callback(data); // Execute the callback with the data }, 2000); } fetchData((data) => { console.log(data); // Logs after data is fetched });
說明:
回呼問題:
定義:Promise 是一個表示非同步操作最終完成(或失敗)及其結果值的物件。
好處:
範例:
function fetchData() { return new Promise((resolve, reject) => { console.log("Fetching data..."); setTimeout(() => { const data = "Data received"; resolve(data); // Resolve the promise with data }, 2000); }); } fetchData() .then(data => { console.log(data); // Logs after promise is resolved }) .catch(error => { console.error(error); // Handles errors });
說明:
定義:Async/await 是建立在 Promise 之上的語法糖,使您能夠編寫看起來和行為更像同步程式碼的非同步程式碼。
好處:
範例:
function task1() { console.log("Task 1 started"); for (let i = 0; i < 1e9; i++); // Simulating a long task console.log("Task 1 completed"); } function task2() { console.log("Task 2 started"); for (let i = 0; i < 1e9; i++); // Simulating a long task console.log("Task 2 completed"); } task1(); // Executes first task2(); // Executes after task1 is completed
說明:
同步與非同步:
回呼:
承諾:
非同步/等待:
透過理解和利用這些策略,您可以開發出有效且易於使用的 JavaScript 應用程式。無論您是管理簡單的任務還是創建複雜的工作流程,學習非同步程式設計對於成為熟練的 JavaScript 開發人員至關重要。
追蹤我:Github Linkedin 線程
以上是了解 JavaScript 非同步程式設計:回呼、Promise 和 Async/Await的詳細內容。更多資訊請關注PHP中文網其他相關文章!