Arrêter les erreurs avant qu'elles ne vous arrêtent

Arrêter les erreurs avant qu'elles ne vous arrêtent : l'opérateur d'affectation sécurisée (?=) et la gestion des promesses avec élégance

À mesure que JavaScript évolue, de nouvelles fonctionnalités et propositions continuent d'arriver, visant à rendre le codage plus efficace et plus résistant aux erreurs. L'une de ces fonctionnalités est le Safe Assignment Operator (?=), un ajout proposé au langage. En attendant sa sortie officielle, nous pouvons implémenter des fonctionnalités similaires aujourd'hui pour protéger notre code des problèmes courants tels que les valeurs nulles ou non définies.

Dans cet article, nous explorerons l'opérateur ?=, créerons notre propre version en utilisant le JavaScript existant et présenterons des moyens pratiques de gérer les promesses de manière plus gracieuse dans les opérations asynchrones.

Comprendre l'opérateur d'affectation sécurisée (?=)

Qu'est-ce que l'opérateur ?= ?

L'opérateur d'affectation sécurisée (?=) permet aux développeurs d'attribuer une valeur à une variable uniquement si la cible est nulle ou indéfinie. C'est une manière plus concise de dire : "Attribuez cette valeur si la variable est vide".

Voici comment cela fonctionne :

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

Dans ce cas, la variable nom d'utilisateur se voit attribuer "Shahar" car sa valeur était nulle. Si le nom d'utilisateur avait une valeur existante, l'opérateur transmettrait simplement l'affectation.

Pourquoi c'est utile

L'opérateur ?= simplifie le code en réduisant le besoin de vérifications if explicites ou d'opérations ternaires pour garantir une affectation sûre. Cependant, cet opérateur est encore au stade de proposition au sein d'ECMAScript, ce qui signifie qu'il pourrait changer avant de faire partie du langage JavaScript. Vous pouvez suivre son évolution ici.

Créer une fonction d'affectation sécurisée

Déploiement de safeAssign

En attendant que ?= devienne officiel, nous pouvons imiter son comportement aujourd'hui en utilisant une fonction utilitaire personnalisée appelée safeAssign. Cette fonction utilise l'opérateur de coalescence nul (??), qui est déjà largement pris en charge dans les environnements modernes.

Voici notre fonction safeAssign :

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

Exemple en action

Voyons comment cela fonctionne :

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

C'est effectivement ce que ferait l'opérateur ?= . Si la variable est nulle ou indéfinie, nous lui attribuons une valeur ; sinon, nous le laissons intact.

Limites de safeAssign

Bien que safeAssign fournisse des fonctionnalités similaires à ?=, il présente des limites :

• Simplicité : safeAssign est une fonction utilitaire et ne peut pas fournir le même niveau d'élégance syntaxique que l'opérateur ?= natif. Une utilisation excessive des fonctions personnalisées peut conduire à un code plus détaillé.
• Performances : bien que l'impact sur les performances de safeAssign soit négligeable dans les applications à petite échelle, les opérateurs natifs comme ?= seront probablement plus rapides dans les systèmes à plus grande échelle grâce aux optimisations du moteur.
• Prise en charge des navigateurs : l'opérateur de fusion nul (??) utilisé dans safeAssign est pris en charge dans la plupart des navigateurs et environnements modernes, mais les environnements plus anciens peuvent ne pas le prendre en charge sans polyfills.

Une comparaison rapide avec d'autres langues

De nombreuses autres langues offrent des fonctionnalités similaires à l'opérateur ?= proposé :

• C# possède l'opérateur d'affectation de fusion nulle (??=), qui se comporte de la même manière que la proposition ?= de JavaScript.
• Python utilise le mot-clé or pour les affectations sécurisées, où a = a ou value est un modèle courant pour attribuer une valeur uniquement si a est faux.

Ces opérateurs facilitent la gestion des valeurs potentiellement vides, réduisant ainsi le code passe-partout.

Gestion des opérations asynchrones avec safeAwait

Présentation de safeAwait

Lorsque vous travaillez avec des opérations asynchrones en JavaScript, il est facile de tomber sur des promesses rejetées ou des résultats inattendus. Au lieu de gérer manuellement chaque rejet avec .catch(), nous pouvons rationaliser le processus à l'aide d'une fonction personnalisée appelée safeAwait, qui regroupe les promesses dans une structure plus propre et plus sûre.

Voici la fonction 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
  }
}

Exemple : récupération de données avec gestion des erreurs

Utilisons safeAwait pour récupérer les données d'une API et gérer les erreurs potentielles :

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
}

Dans cet exemple, safeAwait gère à la fois les cas de réussite et d'erreur, permettant à la fonction appelante de gérer le résultat de manière plus prévisible.

Variations de safeAwait

Nous pouvons également étendre safeAwait pour différents cas d'utilisation. Par exemple, voici une version qui réessaye la promesse une fois avant d'échouer :

async function safeAwaitWithRetry(promise, errorHandler, retries = 1) {
  let attempt = 0;
  while (attempt <= retries) {
    const [error, data] = await safeAwait(promise, errorHandler);
    if (!error) return [null, data];
    attempt++;
  }
  return [new Error("Max retries reached"), null];
}

Cette variante réessaye la promesse jusqu'à un nombre spécifié de fois avant de jeter l'éponge.

Best Practices for Error Handling in JavaScript

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

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

Before and After: Clean Code with safeAssign and safeAwait

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

Without safeAssign:

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!