Maison interface Web js tutoriel Comment implémenter l'enregistrement global dans axios

Comment implémenter l'enregistrement global dans axios

Jun 12, 2018 am 10:08 AM
axios 全局

Cet article vous présente principalement les informations pertinentes sur la façon d'enregistrer axios dans le monde. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour que tout le monde puisse apprendre ou utiliser axios. ensemble ci-dessous.

Préface

Quand j'ai récemment écrit un projet avec Vue, j'ai utilisé axios car axios ne peut pas utiliser Vue.use() (les détails peuvent être introduit (voir cet article), vous devez donc importer lors de l'utilisation d'axios dans chaque fichier .vue, ce sera bien, mais s'il y en a beaucoup, ce sera un peu gênant.

Plus tard, j'ai réfléchi à la possibilité d'ajouter des axios directement au prototype Vue, afin que l'enregistrement global soit réalisé. Pas grand chose à dire ci-dessous, jetons un œil à l’introduction détaillée.

La méthode est la suivante :

1. Introduisez d'abord axios dans main.js

import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
 el: '#app',
 render:h => h(App)
})
Copier après la connexion

2. Lorsque vous l'utilisez dans un fichier .vue, faites attention à ajouter ceci

<script>
export default {
 name:&#39;app&#39;,
 data(){
  return{
   msg:&#39;hello&#39;
  }
 },
 methods:{
  send(){
   // 注意:因为 axios 是加到 Vue 的原型中了,所以使用 axios 方法时,前面需要加 this
   this.axios.get(&#39;https://www.baidu.com*******&#39;)
   .then(resp => {
    console.log(resp.data)
   }).catch(err => {
    console.log(err);
   })
  }
 }
}
</script>
Copier après la connexion
avant axios. sera utile à tout le monde à l’avenir.

Articles connexes :

Comment construire helloWorld en utilisant vue-cli dans vue

Problèmes de transmission de valeurs dans layui

Comment implémenter un système de loterie à l'aide de JavaScript

Réponse détaillée : quel impact les changements de vue ont-ils sur les composants ?

Comment emballer à l'aide de Parcel

Explication détaillée de la façon de configurer l'outil d'emballage Vue

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire si « Erreur non interceptée (promise) : échec de la demande avec le code d'état 500 » se produit lors de l'utilisation d'axios dans une application Vue ? Que dois-je faire si « Erreur non interceptée (promise) : échec de la demande avec le code d'état 500 » se produit lors de l'utilisation d'axios dans une application Vue ? Jun 24, 2023 pm 05:33 PM

Il est très courant d'utiliser axios dans les applications Vue. axios est un client HTTP basé sur Promise qui peut être utilisé dans les navigateurs et Node.js. Pendant le processus de développement, le message d'erreur « Uncaught(inpromise)Error : Requestfailedwithstatuscode500 » apparaît parfois pour les développeurs, ce message d'erreur peut être difficile à comprendre et à résoudre. Cet article explorera ceci

Choix de requête de données dans Vue : Axios ou Fetch ? Choix de requête de données dans Vue : Axios ou Fetch ? Jul 17, 2023 pm 06:30 PM

Choix de requête de données dans Vue : AxiosorFetch ? Dans le développement de Vue, la gestion des demandes de données est une tâche très courante. Choisir quel outil utiliser pour les demandes de données est une question à considérer. Dans Vue, les deux outils les plus courants sont Axios et Fetch. Cet article comparera les avantages et les inconvénients des deux outils et donnera un exemple de code pour vous aider à faire votre choix. Axios est un client HTTP basé sur Promise qui fonctionne dans les navigateurs et Node.

Que dois-je faire si « TypeError : Failed to fetch » se produit lors de l'utilisation d'axios dans une application Vue ? Que dois-je faire si « TypeError : Failed to fetch » se produit lors de l'utilisation d'axios dans une application Vue ? Jun 24, 2023 pm 11:03 PM

Récemment, lors du développement d'applications Vue, j'ai rencontré un problème courant : le message d'erreur « TypeError : Failedtofetch ». Ce problème se produit lors de l'utilisation d'axios pour effectuer des requêtes HTTP et que le serveur backend ne répond pas correctement à la requête. Ce message d'erreur indique généralement que la demande ne peut pas atteindre le serveur, probablement pour des raisons de réseau ou parce que le serveur ne répond pas. Que devons-nous faire après l'apparition de ce message d'erreur ? Voici quelques solutions de contournement : Vérifiez votre connexion réseau en raison de

Comment résoudre le problème « Erreur : erreur réseau » lors de l'utilisation d'axios dans l'application Vue ? Comment résoudre le problème « Erreur : erreur réseau » lors de l'utilisation d'axios dans l'application Vue ? Jun 25, 2023 am 08:27 AM

Comment résoudre le problème « Erreur : NetworkError » lors de l'utilisation d'axios dans l'application Vue ? Dans le développement d'applications Vue, nous utilisons souvent axios pour faire des requêtes API ou obtenir des données, mais parfois nous rencontrons « Erreur : NetworkError » dans les requêtes axios. Que devons-nous faire dans ce cas ? Tout d'abord, vous devez comprendre ce que signifie « Erreur : NetworkError ». Cela signifie généralement la connexion réseau.

Utiliser efficacement Vue et Axios pour mettre en œuvre le traitement par lots des données frontales Utiliser efficacement Vue et Axios pour mettre en œuvre le traitement par lots des données frontales Jul 17, 2023 pm 10:43 PM

Utilisez efficacement Vue et Axios pour implémenter le traitement par lots des données frontales. Dans le développement front-end, le traitement des données est une tâche courante. Lorsque nous devons traiter une grande quantité de données, le traitement des données deviendra très lourd et inefficace s’il n’existe pas de méthode efficace. Vue est un excellent framework frontal et Axios est une bibliothèque de requêtes réseau populaire. Ils peuvent travailler ensemble pour implémenter le traitement par lots des données frontales. Cet article présentera en détail comment utiliser efficacement Vue et Axios pour le traitement par lots de données et fournira des exemples de code pertinents.

Quelle est la spécification de transmission de paramètres pour Java axios et la séparation front-end et back-end Spring ? Quelle est la spécification de transmission de paramètres pour Java axios et la séparation front-end et back-end Spring ? May 03, 2023 pm 09:55 PM

1. La méthode de transfert de paramètres axios correspondant à l'annotation @RequestParam prend comme exemple le code Springjava suivant. L'interface utilise le protocole POST et les paramètres qui doivent être acceptés sont tsCode, indexCols et table. Pour cette interface HTTP Spring, comment axios doit-il transmettre les paramètres ? Combien de méthodes existe-t-il ? Présentons-les un par un. @PostMapping("/line")publicList

Comment les frontaux axios et SpringBoot appellent-ils l'interface back-end pour l'interaction des données ? Comment les frontaux axios et SpringBoot appellent-ils l'interface back-end pour l'interaction des données ? May 13, 2023 am 10:34 AM

1. L'introduction d'un système complet, l'interaction front-end et back-end est essentielle. Ce processus peut être divisé en les étapes suivantes : le front-end initie une requête au back-end une fois que l'interface back-end a reçu le front. -end, il commence à appeler des méthodes couche par couche pour traiter les données. Les données finales sont renvoyées à l'interface frontale. Une fois la requête frontale réussie, les données sont rendues à l'interface. 2. Structure du projet Technologie front-end : axios Technologie back-end : SpringBoot (Cela n'a pas d'importance, mais vous devez avoir un chemin d'accès à la couche de contrôle, ce qu'on appelle la requête. La méthode correspondant à l'adresse peut utiliser SSM framework ou framework SSH.) Ce qui précède est la structure générale des fichiers. Je pense que le traitement des données back-end de tout le monde se passera bien. Ce n'est rien de plus que : la couche de contrôle reçoit la requête frontale et appelle la méthode d'interface de la couche métier correspondante. implémentation de la couche

Comment utiliser vue3+ts+axios+pinia pour obtenir un rafraîchissement insensé Comment utiliser vue3+ts+axios+pinia pour obtenir un rafraîchissement insensé May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia réalise un rafraîchissement insensé 1. Téléchargez d'abord aiXos et pinianpmipinia dans le projet--savenpminstallaxios--save2 Encapsuler la requête axios-----Télécharger js-cookienpmiJS-cookie-s//Introduire aixosimporttype{AxiosRequestConfig , AxiosResponse}de"axios";importaxiosfrom'axios';import{ElMess

See all articles