了解非同步 JavaScript

發佈於2024-11-07

Understanding Async JavaScript

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

什麼是異步 JavaScript？

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

非同步 JavaScript 中的關鍵概念

同步與非同步：
- 同步：每個任務都會等待前一個任務完成後再開始。例如：
```
 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 秒後記錄，但同時，您的程式碼可以繼續執行其他操作。

回呼:

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
 });

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

承諾：

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 被拒絕，則處理錯誤。

非同步/等待:
- 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);
     }
 }
```