Méthode de requête Ajax dans le client axios

Cette fois, je vais vous présenter la méthode de requête ajax dans le client axios. Quelles sont les précautions lors de l'utilisation de la méthode de requête ajax dans le client axios. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Avant-propos

AJAX, Asynchronous JavaScript et XML (JavaScript et XML asynchrones), est une solution technologique de développement Web permettant de créer des applications Web interactives.

JavaScript asynchrone :

Utilisez les fonctions du [langage JavaScript] et des [bibliothèques de classes fournies par le navigateur] pour envoyer des requêtes au serveur une fois que le serveur a traité la requête, [exécutez automatiquement une fonction de rappel JavaScript ].

PS : L'ensemble du processus de demande et de réponse ci-dessus est effectué [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

Raconte-moi d'abord une histoire

Les API comme axios qui prennent en charge Promise sont déjà très conviviales. Une fois la requête réussie, nous pouvons obtenir les données renvoyées par le backend à partir de la réponse. 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 fournira pratiquement pas les données directement. Il effectuera 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"
}

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

Soudain, un jour, le backend a dit : "response.data n'est plus un objet, il a été remplacé par JSON string, veuillez effectuer un traitement ~".

Et oui, chaque interface, chacune, nous devons passer à JSON.parse(response.data).obj, half life !

Si le backend répète : « J'ai modifié l'objet, veuillez 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 étions jamais rencontrés. . .

Le reste d'entre 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, c'est donc une sorte de "méta-programmation", c'est-à-dire à la programmation langue à programmer.

Le proxy peut être compris comme la mise en place d'une couche « d'interception » avant l'objet cible. Tout accès externe à l'objet doit d'abord passer par cette couche d'interception. Il fournit donc un mécanisme pour filtrer et réécrire les accès externes.

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 est modifié encore et encore, nous n'avons besoin de modifier qu'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 aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

Comment réaliser la liaison de deux zTree dans une seule page

Comment appeler le WeChat fonction de partage dans nodejs

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!