成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

leon / 543人閱讀

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

準(zhǔn)備

利用vue-cli腳手架創(chuàng)建項目

進(jìn)入項目安裝vuex、axios（npm install vuex,npm install axios）

axios配置

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

main.js

//引入axios
import Axios from "axios"

//修改原型鏈，全局使用axios,這樣之后可在每個組件的methods中調(diào)用$axios命令完成數(shù)據(jù)請求
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狀態(tài)設(shè)置控制loading的顯隱

store.js(Vuex)

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

在state中定義isShow屬性，默認(rèn)false隱藏

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

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

組件使用axios請求數(shù)據(jù) 
methods:{
        getData(){
            this.$axios.get("https://www.apiopen.top/journalismApi")
            .then(res=>{
                console.log(res)//返回請求的結(jié)果
            })
            .catch(err=>{
                console.log(err)
            })
        }
    }

我這里使用一個按鈕進(jìn)行觸發(fā)事件，利用get請求網(wǎng)上隨便找的一個api接口,.then中返回請求的整個結(jié)果（不僅僅包括數(shù)據(jù)）

Axios攔截器配置

main.js

//定義一個請求攔截器
Axios.interceptors.request.use(function(config){
  store.state.isShow=true; //在請求發(fā)出之前進(jìn)行一些操作
  return config
})
//定義一個響應(yīng)攔截器
Axios.interceptors.response.use(function(config){
  store.state.isShow=false;//在這里對返回的數(shù)據(jù)進(jìn)行處理
  return config
})

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

效果展示 

本文作者：茅野zhy
博客鏈接：www.zhysama.xyz
版權(quán)聲明： 該文章由博主編輯 , 轉(zhuǎn)發(fā)請注明出處謝謝！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108473.html

相關(guān)文章

  • Vue基于vuex、axios攔截器實現(xiàn)loading效果及axios的安裝配置

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

    Shimmer 評論0 收藏0

  • 從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(五):模塊化VUEX及使用vuetify

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

    fuyi501 評論0 收藏0

  • VUE知識點集錦

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

    Tecode 評論0 收藏0

  • VUE知識點集錦

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

    APICloud 評論0 收藏0

  • 基于vue項目的知識總結(jié)

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

    tianlai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<