在錯誤阻止你之前阻止它們

在錯誤阻止你之前阻止錯誤：安全賦值運算子 (?=) 和優雅地處理 Promise

隨著 JavaScript 的發展，新功能和提案不斷湧現，旨在使編碼更加有效率和防錯。其中一個功能是安全賦值運算子 (?=)，這是該語言的建議添加內容。雖然我們仍在等待其正式發布，但我們今天可以實現類似的功能，以保護我們的程式碼免受 null 或未定義值等常見問題的影響。

在本文中，我們將探索 ?= 運算符，使用現有 JavaScript 建立我們自己的版本，並介紹在非同步操作中更優雅地處理 Promise 的實用方法。

了解安全賦值運算子 (?=)

什麼是 ?= 運算子？

安全賦值運算子 (?=) 允許開發人員僅在目標為 null 或未定義時才為變數賦值。這是一種更簡潔的說法，「如果變數為空，則分配此值」。

其工作原理如下：

let username = null;
username ?= "Shahar"; 
console.log(username); // Output: "Shahar"

在這種情況下，變數 username 被指派為“Shahar”，因為它的值為 null。如果使用者名稱具有現有值，則操作員將簡單地傳遞分配。

為什麼它有用

?= 運算子透過減少明確 if 檢查或三元運算的需要來簡化程式碼，以確保安全分配。然而，該運算符在 ECMAScript 中仍處於提案階段，這意味著它在成為 JavaScript 語言的一部分之前可能會發生變化。您可以在這裡追蹤它的發展。

制定安全的分配函數

推出 safeAssign

當我們等待 ?= 成為正式版本時，我們今天可以使用名為 safeAssign 的自訂實用函數來模仿它的行為。此函數使用空合併運算子 (??)，該運算子已在現代環境中廣泛支援。

這是我們的 safeAssign 函數：

function safeAssign(target, value) {
  return target ?? value;
}

實際例子

讓我們看看它是如何運作的：

let username = undefined;
username = safeAssign(username, "Shahar");
console.log(username); // Output: "Shahar"

這其實就是 ?= 運算子所做的事情。如果變數為 null 或未定義，我們為其賦值；否則，我們將保持原樣。

safeAssign 的限制

雖然 safeAssign 提供與 ?= 類似的功能，但它有其限制：

• 簡單性：safeAssign 是一個實用函數，無法提供與原生 ?= 運算子相同等級的語法優雅性。過度使用自訂函數可能會導致更冗長的程式碼。
• 效能：儘管 safeAssign 對效能的影響在小型應用程式中可以忽略不計，但由於引擎最佳化，像 ?= 這樣的原生運算子在大規模系統中可能會更快。
• 瀏覽器支援：大多數現代瀏覽器和環境都支援 safeAssign 中使用的 nullish 合併運算子 (??)，但較舊的環境如果沒有 polyfills 可能不支援它。

與其他語言的快速比較

許多其他語言提供與建議的 ?= 運算子類似的功能：

• C# 具有空合併賦值運算子 (??=)，其行為類似 JavaScript 的 ?= 建議。
• Python 使用 or 關鍵字進行安全賦值，其中 a = a 或 value 是僅當 a 為假時才賦值的常見模式。

這些運算子讓處理潛在的空值更加簡單，減少了樣板程式碼。

使用 safeAwait 處理非同步操作

引入安全等待

在 JavaScript 中使用非同步操作時，很容易遇到被拒絕的承諾或意外的結果。我們可以使用名為 safeAwait 的自訂函數來簡化流程，而不是使用 .catch() 手動處理每個拒絕，該函數將 Promise 包裝在更乾淨、更安全的結構中。

這是 safeAwait 函數：

async function safeAwait(promise, errorHandler) {
  try {
    const data = await promise;
    return [null, data]; // Success: No error, return the data
  } catch (error) {
    if (errorHandler) errorHandler(error); // Optional error handler
    return [error, null]; // Error occurred, return error with null data
  }
}

範例：透過錯誤處理取得數據

讓我們使用 safeAwait 從 API 取得資料並處理潛在的錯誤：

async function getData() {
  const [error, response] = await safeAwait(
    fetch("https://api.example.com"),
    (err) => console.error("Request failed:", err)
  );

  if (error) return; // Exit if there's an error
  return response; // Return response if successful
}

在此範例中，safeAwait 處理成功和錯誤情況，允許呼叫函數以更可預測的方式處理結果。

safeAwait 的變體

我們也可以針對不同的用例擴充 safeAwait。例如，這是一個在失敗之前重試 Promise 一次的版本：

async function safeAwaitWithRetry(promise, errorHandler, retries = 1) {
  let attempt = 0;
  while (attempt 



<p>此變體會在認輸前重試承諾達到指定次數。 </p>

<h2>
  
  
  Best Practices for Error Handling in JavaScript
</h2>

<p>When working with asynchronous code, proper error handling is crucial. Here are some best practices:</p>

<ol>
<li>
<strong>Always handle rejected promises</strong>: Unhandled promise rejections can lead to crashes or undefined behavior. Use try/catch or .catch() to ensure promises are properly handled.</li>
<li>
<strong>Centralize error handling</strong>: Utility functions like safeAwait allow you to centralize error handling, making it easier to manage and debug your code.</li>
<li>
<strong>Graceful degradation</strong>: Ensure that your application can recover from errors gracefully without crashing or leaving the user in an undefined state.</li>
<li>
<strong>Use custom error messages</strong>: When throwing errors, provide meaningful error messages to help with debugging.</li>
</ol>

<h2>
  
  
  Before and After: Clean Code with safeAssign and safeAwait
</h2>

<p>Here’s a quick comparison of how these utilities can clean up your code.</p>

<h3>
  
  
  Without safeAssign:
</h3>



<pre class="brush:php;toolbar:false">if (user === null || user === undefined) {
  user = "Shahar";
}

With safeAssign:

user = safeAssign(user, "Shahar");

Without safeAwait:

try {
  const response = await fetch("https://api.example.com");
} catch (error) {
  console.error("Request failed:", error);
}

With safeAwait:

const [error, response] = await safeAwait(fetch("https://api.example.com"), (err) => console.error("Request failed:", err));

Conclusion

In summary, while the Safe Assignment Operator (?=) is still a proposal, we can replicate its behavior today using the safeAssign function for nullish values and safeAwait for more complex asynchronous operations. Both utilities simplify your code, making it more readable and maintainable.

Key Takeaways:

• The ?= operator simplifies safe assignments but is still in the proposal stage.
• You can replicate ?= functionality with safeAssign using the nullish coalescing operator (??), which is widely supported.
• For asynchronous operations, safeAwait provides a cleaner way to handle promise rejections and errors.
• Keep an eye on ECMAScript proposals for future updates.

By leveraging these patterns, you can handle errors like a pro and keep your code clean, readable, and safe.

以上是在錯誤阻止你之前阻止它們的詳細內容。更多資訊請關注PHP中文網其他相關文章！