JavaScript 是一種單執行緒語言，這意味著它一次只能做一件事。然而，Web 應用程式通常需要執行從伺服器取得資料等任務，這可能需要一些時間。如果 JavaScript 必須等待每個任務完成才能繼續，那麼您的 Web 應用程式將會變得緩慢且無回應。這就是非同步（async）JavaScript發揮作用的地方。

什麼是異步 JavaScript？

非同步 JavaScript 允許您的程式碼啟動一個任務，然後在等待該任務完成時繼續執行其他任務。任務完成後，您的程式碼可以返回並處理結果。這有助於保持您的應用程式快速且響應迅速。

非同步 JavaScript 中的關鍵概念

1. 同步與非同步：

   • 同步：每個任務都會等待前一個任務完成後再開始。例如：

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   在同步程式碼中，只有在 someFunction() 完成後才會記錄「End」訊息，這可能會減慢速度。

• 非同步：任務可以獨立啟動和完成，因此您的程式碼不會陷入等待。例如：
  

   console.log("Start");
   setTimeout(() => {
       console.log("End");
   }, 2000);
  

  這裡，「結束」訊息將在 2 秒後記錄，但同時，您的程式碼可以繼續執行其他操作。

1. 回呼:

   • A 回呼是一個作為參數傳遞給另一個函數的函數，該函數將在任務完成後執行。
   • 例子：

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

• 回調是處理非同步任務的原始方法，但它們可能會變得複雜，特別是當您有許多任務需要管理時（這稱為“回調地獄”）。

1. 承諾：

   • A promise 是一個對象，表示非同步任務的最終完成（或失敗）及其結果值。
   • 例子：

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

• resolve：如果任務成功完成，則承諾將被「解決」並帶有一個值。
• reject：如果任務失敗，則 Promise 被「拒絕」並顯示錯誤訊息。
• .then()：處理 Promise 解決後傳回的值。
• .catch()：如果 Promise 被拒絕，則處理錯誤。

1. 非同步/等待:

   • async 和 await 是現代 JavaScript 功能，讓使用 Promise 變得更容易、更具可讀性。
   • async：使用 async 宣告的函數將始終傳回一個 Promise。
   • await：暫停非同步函數的執行，直到承諾得到解決。
   • 例子：

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

• 在此範例中，await 關鍵字用於等待 someAsyncTask 完成，然後再繼續執行下一行程式碼。如果任務失敗，則會在 catch 區塊中擷取並處理錯誤。

概括

• 非同步 JavaScript 透過讓您的程式碼同時處理多個任務，幫助防止您的應用程式變得緩慢且無回應。
• 回呼是在非同步任務完成後運行的函數，但對於複雜的任務可能會變得混亂。
• Promises 提供了一種更簡潔的方式來處理非同步操作，代表將來將完成的任務。
• Async/Await 是一種現代語法，使使用 Promise 變得更簡單、更具可讀性。

了解非同步 JavaScript 對於建立響應迅速、高效的 Web 應用程式至關重要，因為它允許您的程式碼執行任務，而不會陷入等待緩慢操作完成的困境。