Vue基于vuex、axios攔截器實現loading效果及axios的安裝配置

leon 發布于2019-08-26 12:19 / 529人閱讀

摘要：準備利用腳手架創建項目進入項目安裝配置項目中安裝模塊完成后，進行以下配置引入修改原型鏈，全局使用這樣之后可在每個組件的中調用命令完成數據請求組件我這里就選擇使用提供的組件，安裝引入后，將寫成一個組件狀態設置控制的顯隱在中定義屬性，默認隱藏

準備

利用vue-cli腳手架創建項目

進入項目安裝vuex、axios（npm install vuex,npm install axios）

axios配置

項目中安裝axios模塊（npm install axios）完成后，進行以下配置：

main.js

//引入axios
import Axios from "axios"

//修改原型鏈，全局使用axios,這樣之后可在每個組件的methods中調用$axios命令完成數據請求
Vue.prototype.$axios=Axios

loading組件

我這里就選擇使用iview提供的loading組件，

npm install iview

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

安裝引入后，將loading寫成一個組件loading.vue

Vuex state狀態設置控制loading的顯隱

store.js(Vuex)

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

在state中定義isShow屬性，默認false隱藏

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

為loading組件添加v-if綁定state中的isShow

組件使用axios請求數據

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

我這里使用一個按鈕進行觸發事件，利用get請求網上隨便找的一個api接口,.then中返回請求的整個結果（不僅僅包括數據）

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

分別定義一個請求攔截器（請求開始時執行某些操作）、響應攔截器（接受到數據后執行某些操作），之間分別設置攔截時執行的操作，改變state內isShow的布爾值從而控制loading組件在觸發請求數據開始時顯示loading，返回數據時隱藏loading
特別注意：這里有一個語法坑（我可是來來回回踩了不少次）main.js中調取、操作vuex state中的數據不同于組件中的this.$store.state，而是直接store.state 同上面代碼

效果展示

本文作者：茅野zhy
博客鏈接：www.zhysama.xyz
版權聲明： 該文章由博主編輯 , 轉發請注明出處謝謝！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108473.html

Vue基于vuex、axios攔截器實現loading效果及axios的安裝配置

摘要：準備利用腳手架創建項目進入項目安裝配置項目中安裝模塊完成后，進行以下配置引入修改原型鏈，全局使用這樣之后可在每個組件的中調用命令完成數據請求組件我這里就選擇使用提供的組件，安裝引入后，將寫成一個組件狀態設置控制的顯隱在中定義屬性，默認隱藏準備利用vue-cli腳手架創建項目進入項目安裝vuex、axios（npm install vuex,npm install axios） ...

Shimmer 2019-08-23 11:45 評論0 收藏0
從0到1使用VUE-CLI3開發實戰(五):模塊化VUEX及使用vuetify

摘要：小肆前幾天發了一篇年精品開源項目庫的匯總，今天小肆要使用的是在組件中排行第三的。記得點好看呦前置閱讀用從到做一個完整功能手機站一從到開發實戰手機站二提交規范配置從到使用開發實戰三知識儲備從到使用開發實戰四封裝小肆前幾天發了一篇2019年Vue精品開源項目庫的匯總，今天小肆要使用的是在UI組件中排行第三的Vuetify。 vuetify介紹 Vuetify是一個漸進式的框架，完全根據M...

fuyi501 2019-08-23 14:58 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0
基于vue項目的知識總結

摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結，剛好趁著有空就整理一下。結語有新的知識點會更新到知識體系中，總結和心得體會會單獨寫文章詳述，努力填坑前言用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著...

tianlai 2019-08-29 14:07 評論0 收藏0