非同步 JavaScript：Promises 與 Async/Await 的詳細信息

非同步程式設計在現代 Web 開發中至關重要，尤其是 JavaScript。傳統上，程式語言從上到下順序執行程式碼。然而，這種同步執行模型可能會導致效率低下，尤其是在處理耗時的操作（例如從伺服器取得資料、存取檔案或執行複雜計算）時。非同步程式設計透過允許某些進程獨立於主執行緒運行來解決這些挑戰，從而增強 Web 應用程式的回應能力和效能。

本質上是單執行緒的，JavaScript 利用非同步程式設計來管理操作，否則這些操作會阻塞執行緒直到完成。這是透過回調、promise 和 async/await 語法等功能來實現的，這些功能有助於處理完成時間本質上不確定的操作。掌握 JavaScript 非同步程式設計的重要性怎麼強調也不為過。它使開發人員能夠創建更流暢、更快速、更具互動性的 Web 體驗。隨著網站和 Web 應用程式變得越來越複雜和資料驅動，有效處理非同步操作對於保持效能和提供無縫使用者體驗至關重要。

本質上，非同步程式設計不僅透過防止主執行緒阻塞來優化 Web 應用程式的效能，而且還對程式碼庫的可擴展性和可維護性做出了重大貢獻。隨著我們深入研究這個主題，我們將探索 JavaScript 提供的用於處理非同步操作的機制和模式，以及為什麼它們在現代 Web 開發人員的工具包中不可或缺。

了解非同步 JavaScript

想像一下在熙熙攘攘的咖啡店的櫃檯下訂單。您無需等待飲料準備好，而是坐下來瀏覽雜誌。同時，咖啡師正在處理您的訂單。咖啡準備好後，咖啡師會打電話給您來取。此場景類似於 JavaScript 中非同步操作的工作方式。

在 JavaScript 中，非同步操作就像將訂單發送到廚房；您不必站著等待廚師完成。您可以繼續閱讀書籍、與朋友聊天或在咖啡館欣賞音樂。訂單準備好後，您將收到通知，然後您就可以享用餐點了。同樣，非同步 JavaScript 允許 API 呼叫或檔案操作等任務在背景執行。就像你在咖啡館一樣，主程式不會被阻止；它繼續運行並響應其他用戶輸入或操作。

JavaScript 中常見的非同步操作

API 呼叫： 這就像在看電影時從送貨服務訂購食物。你不會為了等待食物而暫停電影；你繼續看，當門鈴響時，你就得到了食物。在 Web 開發中，向伺服器請求資料的工作方式相同。您要求資料並繼續與網站交互，資料到達後就會向您顯示。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json()) // Convert the response to JSON
  .then(data => console.log(data))    // Log the data
  .catch(error => console.error('Error:', error)); // Handle any errors

文件操作：這類似於您在整理辦公桌時發送文件以在印表機上列印。您無需站在印表機旁等待所有文件；你繼續做你的其他任務。同樣，JavaScript 中的檔案操作（尤其是在 Node.js 等平台上）可讓您啟動檔案讀取或寫入操作，然後繼續執行其他任務，並在操作完成時收到通知。

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading the file:', err);
    return;
  }
  console.log(data); // Log the contents of the file
});

計時器和延遲： 在 JavaScript 中使用 setTimeout() 或 setInterval() 就像烤蛋糕時設定烤箱計時器。你設定好定時器，讓烤箱繼續工作，同時攪拌一些糖霜。計時器不會停止您的其他活動；它只是提醒您何時採取下一步。

setTimeout(() => {
  console.log('This message appears after 2 seconds!');
}, 2000);

事件監聽器：想像一下，在你的花園裡設置一個運動感測器，當它偵測到運動時就會響起鈴聲。這就是事件監聽器的工作原理。您將它們設定為監視某些事件（例如單擊或按鍵），並且它們會運行關聯的函數來回應，而不會幹擾應用程式的其他操作。

document.getElementById('myButton').addEventListener('click', () => {
  console.log('Button was clicked!');
});

Promises

Imagine you're at a carnival and just tossed a ring towards a bottle, aiming to hook it. At that moment, three outcomes are possible: the ring lands perfectly (success), misses entirely (failure), or is still spinning in the air (pending). In JavaScript, this scenario is analogous to a Promise. A Promise is an object that represents the eventual completion or failure of an asynchronous operation. It’s like making a bet on whether the ring will land.

Anatomy of a Promise

Pending: The Promise is initially in the "pending" state. It's uncertain, like the ring spinning in the air.

Fulfilled: If the asynchronous operation completes successfully, the Promise is "fulfilled." Think of this as the ring landing on the bottle.

Rejected: If the operation fails or encounters an error, the Promise is "rejected." This is akin to the ring missing the target.

Creating a Promise Instance

Here is how you can create a promise for the above example:

const ringToss = new Promise((resolve, reject) => {
  let hasLanded = Math.random() > 0.5; // Random chance of success
  if (hasLanded) {
    resolve('You won a prize!'); // Fulfill the promise
  } else {
    reject('Try again!'); // Reject the promise
  }
});

console.log(ringToss); // Logs the Promise object showing its state

Working with Promises

Now that you've tossed the ring, you need strategies to handle the outcome, whether a win or a miss.

Methods to Handle Promises

.then(): This method is used when the promise is fulfilled. It’s like claiming your prize at the carnival booth.

.catch(): This handles rejections or errors. It’s the equivalent of deciding what to do after you miss the ring toss.

.finally(): This method is for code that runs regardless of the outcome, similar to walking away from the booth after winning or losing.

Chaining Promises

Chaining promises is like playing several carnival games in a row. You must complete one game to receive a token that lets you play the next.

enterBooth()
  .then(token => playGameOne(token))
  .then(prize => tradeForToken(prize))
  .then(token => playGameTwo(token))
  .then(prize => console.log(`You won: ${prize}`))
  .catch(error => console.error('Game error:', error));

In the example of chaining promises above, each step represents a sequential operation, each dependent on the success of the previous one. Here’s what happens in each step:

enterBooth(): This is likely the initial step where you "enter" the asynchronous operation. Imagine it as signing up or logging into an online service. This function returns a Promise.

.then(token => playGameOne(token)): Once you successfully enter, you receive a token. This token is then used to play the first game. This step is also a Promise, dependent on obtaining the token from enterBooth().

.then(prize => tradeForToken(prize)): If you win the first game, you receive a prize. This prize must be traded for another token to continue to the next game. This trading action is another asynchronous operation that returns a Promise.

.then(token => playGameTwo(token)): With the new token, you can play the second game. Again, this step is only possible if the previous step of trading the prize for a token is successful.

.then(prize => console.log(You won: ${prize})): If the second game is won, you will receive another prize. This prize is logged to the console, indicating the successful end of this promise chain.

You might be wondering when the .catch block comes into play. The .catch() block is invoked if any of the Promises in the chain fail or are rejected. This could happen if:

*You failed to enter the booth (enterBooth() fails).
*Any game along the way (playGameOne() or playGameTwo()) does not result in a prize.
*The prize cannot be traded for a token.

In any of these scenarios, the .catch() block catches the error, logs it or takes other corrective action. This prevents the error from stopping the entire script and allows for graceful error handling.

Final Words

Choosing between Promises and Async/Await largely depends on your project's specific needs. Async/Await might be the clearer choice for complex sequences of dependent operations due to its straightforward syntax and ease of error handling. Conversely, when dealing with multiple, simultaneous operations that do not depend on each other, utilizing Promises with techniques like Promise.all can significantly enhance performance. Both tools are essential in a JavaScript developer’s toolkit, empowering you to write more efficient, cleaner code.

以上是非同步 JavaScript：Promises 與 Async/Await 的詳細信息的詳細內容。更多資訊請關注PHP中文網其他相關文章！