Résumé de l'expérience en requêtes asynchrones JavaScript et en traitement de données en développement front-end

Résumé de l'expérience des requêtes asynchrones JavaScript et du traitement des données dans le développement front-end

Dans le développement front-end, JavaScript est un langage très important. Il peut non seulement obtenir des effets interactifs et dynamiques sur la page, mais également obtenir et. obtenir des données via des requêtes asynchrones. Dans cet article, je résumerai quelques expériences et conseils concernant le traitement des requêtes et des données asynchrones.

1. Utilisez l'objet XMLHttpRequest pour effectuer des requêtes asynchrones
L'objet XMLHttpRequest est la méthode standard de JavaScript pour envoyer et recevoir des requêtes HTTP. Lors du traitement de requêtes asynchrones, vous pouvez envoyer des requêtes via cet objet et surveiller ses changements de statut. Ce qui suit est un exemple simple d'utilisation de l'objet XMLHttpRequest pour envoyer une requête GET :

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 处理返回的数据
  }
};
xhr.send();

Dans le code ci-dessus, nous créons d'abord un objet XMLHttpRequest, puis appelons la méthode open pour définir la méthode de requête et l'URL, et transmettons un booléen. valeur true pour indiquer l'utilisation d'Envoyer des requêtes de manière asynchrone. Ensuite, nous utilisons l'écouteur d'événement onreadystatechange pour surveiller les changements d'état de la demande. Lorsque le readyState de la requête est 4 et que le code d'état est 200, cela signifie que la requête est réussie et que les données renvoyées peuvent être obtenues via l'attribut ResponseText. Ensuite, nous pouvons convertir les données renvoyées en un objet JavaScript via la méthode JSON.parse et effectuer un traitement ultérieur.

2. Utilisez l'API Fetch pour les requêtes asynchrones
En plus de l'objet XMLHttpRequest, les navigateurs modernes fournissent également une nouvelle API Fetch pour gérer les requêtes asynchrones. L'API Fetch fournit des fonctions plus puissantes et flexibles, prend en charge Promise et une syntaxe plus conviviale. Voici un exemple d'envoi d'une requête GET à l'aide de l'API Fetch :

fetch("http://example.com/api/data")
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("请求失败");
    }
  })
  .then(function(data) {
    // 处理返回的数据
  })
  .catch(function(error) {
    // 处理异常
  });

Dans le code ci-dessus, nous appelons la méthode fetch et transmettons l'URL demandée. La méthode fetch renvoie un objet Promise et les données renvoyées lorsque la demande réussit peuvent être traitées via la méthode then. Dans la méthode then, nous déterminons d'abord si le code d'état de la requête est 200. Si tel est le cas, appelez la méthode Response.json pour convertir les données renvoyées en un objet JavaScript. Ensuite, nous pouvons traiter davantage les données renvoyées dans la méthode then. Si la requête échoue, une exception sera levée, qui pourra être gérée par la méthode catch.

3. Techniques de traitement des données
Lors du traitement des données renvoyées par des requêtes asynchrones, certaines techniques peuvent améliorer la lisibilité et les performances du code :

1. Utiliser des chaînes de modèle
   Une chaîne de modèle est un type qui peut contenir des variables et des expressions. Une chaîne littérale du formulaire. Lors du traitement des données renvoyées, vous pouvez utiliser des chaînes de modèle pour fusionner les données au format HTML ou dans d'autres formats. Par exemple :

var name = "John";
var age = 30;
var html = `<div>Name: ${name}</div><div>Age: ${age}</div>`;

2. Utilisation des fonctions fléchées
   La fonction flèche est une nouvelle façon de définir les fonctions introduite dans ES6. Elle peut définir les fonctions de manière plus concise et hériter de la valeur this du contexte actuel. Lors du traitement des données renvoyées, vous pouvez utiliser des fonctions fléchées pour gérer le parcours et le mappage des données. Par exemple :

var users = [{ name: "John", age: 30 }, { name: "Mary", age: 25 }];
var names = users.map(user => user.name);

3. Évitez d'imbriquer les fonctions de rappel trop profondément
   Imbriquer les fonctions de rappel trop profondément rendra le code difficile à lire et à maintenir. Lors du traitement des requêtes asynchrones, vous pouvez utiliser Promise ou async/await pour éviter d'imbriquer trop profondément les fonctions de rappel. Par exemple :

fetch("http://example.com/api/data")
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("请求失败");
    }
  })
  .then(function(data) {
    return data.filter(user => user.age > 18);
  })
  .then(function(filteredData) {
    // 处理过滤后的数据
  })
  .catch(function(error) {
    // 处理异常
  });

Dans le code ci-dessus, nous traitons les données en série via plusieurs méthodes then au lieu d'imbriquer plusieurs fonctions de rappel.

4. Conclusion
Dans le développement front-end, les requêtes asynchrones JavaScript et le traitement des données sont des éléments essentiels. En maîtrisant l'utilisation de l'objet XMLHttpRequest et de l'API Fetch, et en appliquant certaines techniques de traitement des données, vous pouvez améliorer l'efficacité du développement et améliorer l'expérience utilisateur. J'espère que le résumé de l'expérience ci-dessus sera utile pour vos requêtes asynchrones et votre traitement de données dans le développement front-end.

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!