Vue implémente les effets de chargement et la configuration d'installation d'axios basée sur vuex et axios

Le contenu de cet article concerne l'effet de chargement de Vue basé sur l'intercepteur vuex et axios ainsi que l'installation et la configuration d'axios. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Préparer

• Utiliser l'échafaudage vue-cli pour créer un projet

• Entrez le projet pour installer vuex et axios (npm install vuex, npm install axios)

configuration axios

Installer dans le projet Une fois le module axios (npm install axios) terminé, effectuez la configuration suivante :

main.js

//引入axios
import Axios from 'axios'

//修改原型链，全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求
Vue.prototype.$axios=Axios

composant de chargement

J'ai choisi d'utiliser le composant de chargement fourni par iview ici

npm install iview

main.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

Après l'installation et l'introduction, le chargement est écrit comme un chargement de composant. .vue

Le paramètre d'état Vuex contrôle la visibilité du chargement

store.js(Vuex)

export const store = new Vuex.Store({
    state:{
        isShow:false
    }
})

Définir l'attribut isShow dans l'état, false par défaut est masqué

v-if="this.$store.state.isShow"

Ajouter une liaison v-if au chargement du composant isShow dans l'état

Le composant utilise axios pour demander des données

<button>请求数据</button>

methods:{
        getData(){
            this.$axios.get('https://www.apiopen.top/journalismApi')
            .then(res=>{
                console.log(res)//返回请求的结果
            })
            .catch(err=>{
                console.log(err)
            })
        }
    }

J'utilise un bouton pour déclencher l'événement, utilisez get pour demander une interface api trouvée sur Internet, et renvoyer en .then Le résultat complet de la requête (pas seulement les données)

Configuration de l'intercepteur Axios

main.js

//定义一个请求拦截器
Axios.interceptors.request.use(function(config){
  store.state.isShow=true; //在请求发出之前进行一些操作
  return config
})
//定义一个响应拦截器
Axios.interceptors.response.use(function(config){
  store.state.isShow=false;//在这里对返回的数据进行处理
  return config
})

Définissez un intercepteur de requête (effectuez certaines opérations au démarrage de la requête) et un intercepteur de réponse (effectuez certaines opérations après avoir reçu les données). être effectué lors de l'interception et modifier l'isShow dans l'état. La valeur booléenne contrôle le composant de chargement pour afficher le chargement lorsque les données de la requête sont déclenchées et masquer le chargement lorsque les données sont renvoyées
Attention particulière : <.> : Il y a une fosse de syntaxe ici (j'ai marché dessus plusieurs fois) Les données dans l'état vuex qui sont appelées et manipulées dans main.js sont différentes de this.$store.state dans le composant, mais directement store.state . Identique au code ci-dessus

Affichage de l'effet

.

Recommandations associées :

vue Exemples d'étapes pour configurer axios

Implémenter la fonction de commutation d'animation basée sur Vue , Vuex et Vue-router

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!