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"
}

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

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

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

Plus tard, nous

langage de programmation.

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;
 });
 }
 }
});

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

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!