Analyse des problèmes et solutions de sérialisation Vue JSON

Dans le développement front-end, il est souvent nécessaire de transférer des données vers ou d'obtenir des données depuis le back-end. À l'heure actuelle, la sérialisation et la désérialisation des données sont nécessaires, et JSON (JavaScript Object Notation) est un format de transmission de données très populaire. . Dans le framework Vue, nous utilisons généralement des outils tels que axios ou fetch pour obtenir des données du backend via AJAX, puis lions les données aux composants Vue. Cependant, nous rencontrons parfois des problèmes de sérialisation JSON, en particulier lorsque des données sont en JSON telles que Date. le type ne peut pas être sérialisé. Dans cet article, nous aborderons les problèmes de sérialisation JSON et leurs solutions.

Tout d’abord, nous devons comprendre les problèmes courants de sérialisation JSON. En JavaScript, nous pouvons sérialiser des objets JavaScript en chaînes JSON via la méthode JSON.stringify, par exemple :

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj);
console.log(json); // {"name":"John","age":30,"birthday":"1990-02-01T00:00:00.000Z"}

Le code ci-dessus sérialise un objet JavaScript contenant des propriétés de type Date dans une chaîne JSON, mais nous avons constaté que le type Date était sérialisé dans une chaîne. Si nous analysons directement cette chaîne JSON en un objet JavaScript, cela convertira la chaîne de type Date en un objet Date, mais si nous transmettons cette chaîne JSON au backend, lorsque le backend analyse la chaîne JSON, les chaînes de type Date ne seront pas analysé correctement.

La question est donc de savoir comment sérialiser un objet JavaScript contenant le type Date ou d'autres types qui ne peuvent pas être sérialisés ? À l'heure actuelle, nous pouvons utiliser le deuxième paramètre de la méthode JSON.stringify, qui est le paramètre de remplacement, pour personnaliser le processus de sérialisation.

Le paramètre de remplacement peut être une fonction. Cette fonction reçoit deux paramètres : le nom de l'attribut et la valeur de l'attribut, puis renvoie une nouvelle valeur d'attribut pour remplacer la valeur d'attribut d'origine. Par exemple :

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj, function(key, value) {
  if (key === 'birthday') {
    return value.toISOString();
  } else {
    return value;
  }
});

console.log(json); // {"name":"John","age":30,"birthday":"1990-02-01T00:00:00.000Z"}

Dans le code ci-dessus, nous définissons une fonction de remplacement. Si le nom de l'attribut actuel est anniversaire, utilisez la méthode toISOString de Date pour le convertir en chaîne au format ISO afin que le backend puisse l'analyser correctement. la valeur de l'attribut d'origine est renvoyée. De cette façon, nous pouvons sérialiser correctement les objets JavaScript contenant des types Date.

En plus du paramètre de remplacement, la méthode JSON.stringify possède également un paramètre d'espace, qui peut être utilisé pour définir le format du contenu de la chaîne JSON de sortie, par exemple :

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj, null, 2);

console.log(json);
/*
{
  "name": "John",
  "age": 30,
  "birthday": "1990-02-01T00:00:00.000Z"
}
*/

Dans le code ci-dessus, nous définissons l'espace paramètre sur 2, afin que les chaînes JSON de sortie aient une indentation et soient plus belles.

Pour résumer, lorsque nous utilisons axios ou d'autres outils pour obtenir des données dans Vue, si les données contiennent du type Date et d'autres données qui ne peuvent pas être directement sérialisées, nous pouvons utiliser le paramètre de remplacement de la méthode JSON.stringify pour personnaliser les règles de sérialisation. . Transmettez ensuite correctement les données au backend.

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!