Toute application Web qui communique avec un serveur backend ne peut pas se passer de demandes HTTP. Le frontal a besoin de données, il demande donc des données sur une demande HTTP réseau (ou communément appelée AJAX) et le serveur renvoie la réponse. Presque chaque site Web le fait en quelque sorte ces jours-ci.

Pour les grands sites Web, nous pouvons nous attendre à voir plus de demandes comme celle-ci. Plus de données, plus d'API et des cas plus spéciaux. à mesure que la taille du site Web augmente, il est très important de rester organisé. Un concept classique est sec (ne vous répétez pas), qui fait référence au processus de résumé du code pour éviter les doublons. Ceci est idéal car il nous permet généralement d'écrire du code une fois, de l'utiliser à plusieurs endroits et de mettre à jour en un seul endroit, plut?t que dans chaque instance.

Nous pouvons également utiliser des bibliothèques pour nous aider. Pour Ajax, Axios est un choix populaire. Vous le connaissez peut-être déjà, et vous l'utilisez même pour la publication autonome et obtenez des demandes pendant le développement.

Installation et bases

Il peut être installé à l'aide de NPM (ou de fil):

 Axe d'installation de NPM

Une demande de poste autonome utilisant Axios ressemble à ceci:

 axios.post ('https://axios-app.firebaseio.com/users.json', formdata)
  .Then (res => console.log (res))
  .Catch (error => console.log (erreur))

JavaScript natif Il existe également de nombreuses fa?ons d'exécuter du code JavaScript. Il convient de noter que fetch (). Alors pourquoi utiliser la bibliothèque? Tout d'abord, la gestion des erreurs de Fetch est très étrange. Dès le début, l'utilisation d'Axios sera beaucoup plus facile. Si vous voulez voir la comparaison, nous avons un article qui couvre les deux méthodes et une autre discute de la valeur de cette méthode abstraite.

Une autre raison d'utiliser Axios? Cela nous donne plus d'opportunités à sec, alors jetons un coup d'?il.

Configuration globale

Nous pouvons configurer une configuration globale (par exemple, dans notre fichier Main.js) qui gère toutes les demandes d'application à l'aide de la configuration standard , qui est définie via l'objet par défaut fourni avec Axios.

Cet objet contient:

• BUSURL: L'URL relative utilisée comme préfixe de toutes les demandes, et chaque demande peut être jointe à l'URL.
• En-têtes: en-têtes personnalisés qui peuvent être définis en fonction des demandes
• Timeout: Le moment où la demande est interrompue, généralement en millisecondes. La valeur par défaut est 0, ce qui signifie qu'elle n'est pas applicable.
• WithCredentials: indique si les informations d'identification doivent être utilisées pour les demandes de contr?le d'accès croisées. La valeur par défaut est fausse.
• ResponseType: indique le type de données que le serveur renvoie. Les options incluent JSON (par défaut), ArrayBuffer, Document, Text et Stream.
• Responsencoding: indique le codage utilisé pour décoder la réponse. La valeur par défaut est UTF8.
• xsrfcookiename: le nom du cookie utilisé comme valeur de jeton xsrf, la valeur par défaut est xsrf-token.
• xsrfheadername: le nom de l'en-tête HTTP qui héberge la valeur de token xsrf. La valeur par défaut est x-xsrf-token.
• MaxContentLength: définit la taille maximale (en octets) du contenu de réponse HTTP autorisé
• MaxBodyLength: définit la taille maximale (en octets) du contenu de demande HTTP autorisé

La plupart du temps, vous n'utiliserez que BUSTURL, EN-HEADER et PROBABLEMENT TEMPS. Les autres sont moins couramment utilisés car ils ont des valeurs par défaut intelligentes, mais il est agréable de conna?tre leur existence si vous devez résoudre la demande.

C'est ce que fait Dry. Pour chaque demande, nous n'avons pas à répéter la base de l'API ou à répéter les en-têtes importants dont nous pourrions avoir besoin dans chaque demande.

Voici un exemple où notre API a une adresse de base, mais elle a également plusieurs points de terminaison différents. Tout d'abord, nous définissons certaines valeurs par défaut:

 // main.js
importer axios à partir de ?Axios?;

axios.defaults.baseurl = 'https://axios-app.firebaseio.com' // préfixe url axios.defaults.heders.get ['accepter'] = 'application / json' // les en-têtes par défaut pour toutes les demandes obtiennent Axios.DefaultS.heders.post ['accepter'] = 'apposé / json' // Axios plus concise, sans définir ces en-têtes, mais a toujours la possibilité de personnaliser le point de terminaison de l'URL final:

// Form.js Importation des composants axios à partir de ?axios?;

Exporter par défaut {
  Méthodes: {
    onSubmit () {
      // URL est maintenant https://axios-app.firebaseio.com/users.json
      axios.post ('/ users.json', formdata)
        .Then (res => console.log (res))
        .Catch (error => console.log (erreur))
    }
  }
}

Remarque: Cet exemple est en Vue, mais ce concept s'étend à tout environnement JavaScript.

Instance personnalisée

La configuration des instances personnalisées est similaire à la configuration globale, mais avec des Scopes limitées aux composants spécifiés. C'est donc toujours une technologie sèche, mais avec une hiérarchie.

Nous allons configurer notre instance personnalisée dans un nouveau fichier (nommez-le Authaxios.js) et l'importons dans le composant "Suivre".

 // Authaxios.js
Importer des axios à partir de ?Axios?

const usominstance = axis.create ({{
  BUSURL: 'https://axios-app.firebaseio.com'
})
personnalisation.defaults.heders.post ['accepter'] = 'application / json'

// ou comme ?a ...
const usominstance = axis.create ({{
  BUSURL: ?https://axios-app.firebaseio.com?,
  En-têtes: {'accepter': 'application / json'}
})

Ensuite, nous importons ce fichier dans le composant de formulaire:

 // Form.js Component // Importer l'importation axios à partir de './authaxios'

Exporter par défaut {
  Méthodes: {
    onSubmit () {
      axios.post ('/ users.json', formdata)
        .Then (res => console.log (res))
        .Catch (error => console.log (erreur))
    }
  }
}

Intercepteur

Un intercepteur peut gérer des situations où les configurations globales ou les instances personnalisées peuvent être trop générales, ce qui signifie que si vous définissez des en-têtes dans leurs objets, il sera appliqué aux en-têtes pour chaque demande du composant affecté. L'intercepteur est capable de modifier dynamiquement les propriétés d'objet. Par exemple, nous pouvons envoyer différents en-têtes en fonction de toute condition que nous choisissons dans l'intercepteur (même si nous définissons l'en-tête dans l'objet).

Les intercepteurs peuvent être dans le fichier main.js ou dans le fichier d'instance personnalisé. La demande est interceptée après avoir été envoyée et nous permet de modifier le traitement de la réponse.

 // Ajouter une demande interceptor axios.interceptors.request.use (fonction (config) {
  // Faites quelque chose avant d'envoyer la demande, par exemple, nous insérons un délai d'expiration uniquement pour les demandes avec une baisse spécifique (config.baseur === 'https://axios-app.firebaseio.com/users.json') {{
    config.timeout = 4000
  } autre {
    configuration de retour
  }
  console.log (config)
  return config;
}, fonction (erreur) {
  // effectuer certaines opérations sur les erreurs de demande return promest.reject (error);
});

// Ajouter un intercepteur de réponse axios.interceptors.response.use (fonction (réponse) {
  // Effectuez certaines actions sur les données de réponse, telles que console.log, modification de l'en-tête ou ajout d'un comportement conditionnel comme nous le faisons ici, en modifiant les routes en fonction de l'état de la réponse ou de l'écart de la bo?te d'alerte si (réponse.status === 200 || Response.status === 201) {
    router.replace (?page d'accueil?)
  } autre {
    alerte (?comportement d'exception?)
  }
  console.log (réponse)
  réponse de retour;
}, fonction (erreur) {
  // effectuer certaines opérations sur les erreurs de réponse return promest.reject (error);
});

Les intercepteurs, comme son nom l'indique, intercepte les demandes et les réponses pour prendre différentes actions en fonction des conditions fournies. Par exemple, dans l'intercepteur de la demande ci-dessus, nous n'insertons le délai d'expiration de l'état que lorsque la demande a une fondon spécifique. Pour la réponse, nous pouvons l'intercepter et modifier ce que nous retournons, comme modifier l'itinéraire ou afficher une bo?te d'alerte, selon le code d'état. Nous pouvons même fournir plusieurs conditions basées sur différents codes d'erreur.

Au fur et à mesure que le projet s'allonge, vous commencez à avoir de nombreux itinéraires et itinéraires imbriqués, qui communiquent tous avec le serveur en fonction de différents déclencheurs, et les intercepteurs seront très utiles. En plus des conditions que j'ai fixées ci-dessus, il existe de nombreuses autres situations qui peuvent nécessiter l'utilisation d'un intercepteur, selon votre projet.

Fait intéressant, nous pouvons faire appara?tre l'intercepteur pour empêcher qu'il ait un impact. Nous devons attribuer l'intercepteur à une variable et le sortir à l'aide d'une méthode pop-up correctement nommée.

 const reqinterceptor = axios.interceptors.request.use (fonction (config) {
  // Faites quelque chose avant d'envoyer la demande, par exemple, nous insérons un délai d'expiration uniquement pour les demandes avec une baisse spécifique (config.baseur === 'https://axios-app.firebaseio.com/users.json') {{
    config.timeout = 4000
  } autre {
    configuration de retour
  }
  console.log (config)
  return config;
}, fonction (erreur) {
  // effectuer certaines opérations sur les erreurs de demande return promest.reject (error);
});

// Ajouter une réponse interceptor const resinterceptor = axios.interceptors.response.use (fonction (réponse) {
  // Effectuez certaines actions sur les données de réponse, telles que console.log, modification de l'en-tête ou ajout d'un comportement conditionnel comme nous le faisons ici, en modifiant les routes en fonction de l'état de la réponse ou de l'écart de la bo?te d'alerte si (réponse.status === 200 || Response.status === 201) {
    router.replace (?page d'accueil?)
  } autre {
    alerte (?comportement d'exception?)
  }
  console.log (réponse)
  réponse de retour;
}, fonction (erreur) {
  // effectuer certaines opérations sur les erreurs de réponse return promest.reject (error);
});

axios.interceptors.request.eject (reqInterceptor);
axios.interceptors.request.eject (Resinterceptor);

Bien qu'il ne soit pas très couramment utilisé, vous pouvez mettre l'intercepteur dans une déclaration conditionnelle ou le supprimer en fonction de certains événements.

J'espère que cela vous donne une bonne compréhension du fonctionnement d'Axios et de la fa?on de l'utiliser dans votre application pour garder les demandes d'API aux principes secs. Alors que nous touchons la surface en répertoriant les cas d'utilisation courants et les configurations, Axios présente de nombreux autres avantages que vous pouvez explorer dans la documentation, y compris la possibilité d'annuler les demandes et d'empêcher le contrefa?on de demande inter-sites, ainsi que d'autres possibilités incroyables.

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!