您的位置: 首页  >  文章  >  Vue2.0 http请求以及loading展示

Vue2.0 http请求以及loading展示

分类: 文章 • 2024-10-28 23:34:46

先来张目录结构

Vue2.0 http请求以及loading展示

1、准备好你想表达的loading界面，这里我就简单的用文字表示，你可以随意发挥。conponents文件下新建Loading.vue

[html] view plain copy
  1. <template>  
  2.     <div id="loading">  
  3.         加载中，请稍后...  
  4.     </div>  
  5. </template>  

2、引入App.vue

[html] view plain copy
  1. import Loading from './components/Loading.vue'  
[html] view plain copy
  1. components:{  
  2.     Loading  
  3.   },  
[html] view plain copy
  1. <Loading v-show="showLoading"></Loading>  

3，重点来了----- vuex 跟store

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。store（仓库）是 Vuex 应用的核心。"store" 基本上就是一个容器，它包含着你的应用中大部分的状态（state）。更多专业详情参考https://vuex.vuejs.org/zh-cn/intro.html

首先，在components同级目录下新建文件夹store，内部包含文件store.js, actions.js,mutations.js还有type.js

store.js

[html] view plain copy
  1. import Vue from 'vue'  
  2. import Vuex from 'vuex'  
  3.   
  4. import actions from './actions.js'  
  5. import mutations from './mutations.js'  
  6.   
  7. Vue.use(Vuex)  
  8. export default new Vuex.Store({  
  9.     modules:{  
  10.         mutations  
  11.     },  
  12.     actions  
  13. })  


actions.js

[html] view plain copy
  1. import * as types from './type.js'  
  2.   
  3. export default{  
  4.     showloader:({ commit }) => {  
  5.         commit( types.SHOWLOADING )  
  6.     },  
  7.     hideloader:({ commit }) => {  
  8.         commit( types.HIDELOADING )  
  9.     },  
  10. }  

mutations.js

[html] view plain copy
  1. import { SHOWLOADING,HIDELOADING } from './type.js'  
  2.   
  3. const state = {  
  4.     showLoading:false  
  5. }  
  6.   
  7. const mutations = {  
  8.     [SHOWLOADING](state){  
  9.         state.showLoading = true;  
  10.     },  
  11.     [HIDELOADING](state){  
  12.         state.showLoading = false;  
  13.     }  
  14. }  
  15.   
  16. const getters = {  
  17.     showLoading(state){  
  18.         return state.showLoading  
  19.     }  
  20. }  
  21.   
  22. export default {  
  23.     state,mutations,getters  
  24. }  

type.js

[html] view plain copy
  1. export const SHOWLOADING =  'SHOWLOADING';  
  2. export const HIDELOADING =  'HIDELOADING';  

直接的关系可以多看看官方文档，，我就用一张图来解释了

Vue2.0 http请求以及loading展示


刚开始写会觉得麻烦，，但是当你的state需求量增加时，就很方便了，直接按部就班的复制就好。 

4、完善一下main.js，配置请求

[html] view plain copy
  1. import Vue from 'vue'  
  2. import VueRouter from 'vue-router'  
  3. import axios from 'axios'  
  4. import App from './App.vue'  
  5. import routes from './router.js'  
  6. import stores from './store/store.js'  
  7.   
  8. Vue.use(VueRouter)  
  9. const router = new VueRouter({  
  10.     routes  
  11. })  
  12.   
  13. Vue.prototype.$http = axios;  
  14. axios.interceptors.request.use(function(config){  
  15.     stores.dispatch('showloader')  
  16.     return config  
  17. },function(err){  
  18.     return Promise.reject(err)  
  19. });  
  20. axios.interceptors.response.use(function(response){  
  21.     stores.dispatch('hideloader')  
  22.     return response  
  23. },function(err){  
  24.     return Promise.reject(err)  
  25. });  
  26.   
  27. new Vue({  
  28.   el: '#app',  
  29.   router,  
  30.   store:stores,  
  31.   render: h => h(App)  
  32. })  

接下来测试一下，，将focus.vue里获取data方法的文件路径改一下，假装是个错的路径或者加载太慢，run一下后，结果如下

Vue2.0 http请求以及loading展示



恢复路径又一切正常了~

我尽量把语言表达的接近自己的思路了，不造你们能不能看懂Vue2.0 http请求以及loading展示

相关推荐