Comment implémenter une solution élégante pour les requêtes ajax frontales

Cette fois, je vais vous montrer comment implémenter une solution élégante pour les requêtes ajax frontales. Quelles sont les précautions pour implémenter une solution élégante pour les requêtes ajax frontales. Ce qui suit est un cas pratique. , jetons un coup d'oeil.

Avant-propos

AJAX, JavaScript asynchrone et XML (JavaScript et XML asynchrones), un moyen de créer du Web interactif solutions technologiques de développement pour les applications Web.

JavaScript asynchrone :

Utilisez le [langage JavaScript] et les fonctions associées [bibliothèque de classes fournie par le navigateur] pour envoyer une requête au serveur une fois que le serveur a traité la requête, [exécute automatiquement une certaine requête. Une fonction de rappel JavaScript.

PS : L'ensemble du processus de demande et de réponse ci-dessus se fait [secrètement] sans aucune perception sur la page.

Pas grand chose à dire ci-dessous, jetons un œil au texte de cet article.

Le client http de cet article est axios

Laissez-moi d'abord vous raconter une histoire

Similaire à axios L'API qui prend en charge Promise est déjà très conviviale. Une fois la requête réussie, nous pouvons obtenir les données renvoyées par le backend à partir de la réponse d'alors. Par exemple :

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

les données sont dans response.data, ce qui signifie que nous devons effectuer un processus supplémentaire pour chaque requête afin d'obtenir les données réelles.

Ensuite, dans les scénarios réels, le backend ne nous donnera fondamentalement pas les données directement. Il créera une couche d'encapsulation. Par exemple, la structure de response.data sera comme ceci :

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

Donc,

sont les données que nous voulons vraiment, nous devons donc effectuer un processus supplémentaire pour chaque demande =_=response.data.obj

Soudain, un jour, le backend a dit : "

n'est pas plus un objet. Je l'ai changé en JSONresponse.dataString, veuillez effectuer un traitement ~"

Alors oui, chaque interface, chacune, nous devons la changer en

, half life ! JSON.parse(response.data).obj

Si le backend dit : « J'ai à nouveau modifié l'objet, vous pouvez annuler le traitement précédent ~ ». . .

Si le backend indique : "Tous ne sont pas des objets, certaines sont des chaînes JSON. Pour plus de détails, veuillez consulter le document d'interface mis à jour ~". . .

Si nous ne nous sommes jamais rencontrés. . .

Plus tard, nous

ES6 Proxy est utilisé pour modifier le comportement par défaut de certaines opérations, ce qui équivaut à faire des modifications au niveau du langage, il appartient donc à une sorte de "méta-programmation", c'est-à-dire une programmation en

langage de programmation.

Le proxy peut être compris comme la mise en place d'une couche « d'interception » devant l'objet cible. L'accès externe à l'objet doit d'abord passer par cette couche d'interception, il fournit donc un mécanisme pour intercepter l'accès externe. Filtrer et réécrire.

Pour résoudre les problèmes ci-dessus, nous devons encapsuler uniformément toutes les requêtes d'interface. De cette façon, même si le backend change encore et encore, il suffit de modifier un seul endroit voire aucune modification du tout !

const apiService = new Proxy(axios, {
 get (target, propKey, receiver) {
 return function (...args) {
 return target[propKey](...args)
 .then((res) => {
  const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj;
 })
 .catch((err) => {
  throw err;
 });
 }
 }
});

La partie de demande d'interface correspondante est remplacée par :

apiService.get('/user/12345')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.log(error);
 });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Code Ajax+PHP pour changer de statut et supprimer sans actualiser

Comment implémenter le client Ajax de manière asynchrone appeler le serveur

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!