欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年04月26日 15:06:06   作者:茅野丶  
這篇文章主要介紹了Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

準(zhǔn)備

  • 利用vue-cli腳手架創(chuàng)建項(xiàng)目
  • 進(jìn)入項(xiàng)目安裝vuex、axios(npm install vuex,npm install axios)

axios配置

項(xiàng)目中安裝axios模塊(npm install axios)完成后,進(jìn)行以下配置:

main.js

//引入axios
import Axios from 'axios'
//修改原型鏈,全局使用axios,這樣之后可在每個(gè)組件的methods中調(diào)用$axios命令完成數(shù)據(jù)請(qǐng)求
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寫(xiě)成一個(gè)組件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請(qǐng)求數(shù)據(jù)

<button @click="getData">請(qǐng)求數(shù)據(jù)</button>
methods:{
    getData(){
      this.$axios.get('https://www.apiopen.top/journalismApi')
      .then(res=>{
        console.log(res)//返回請(qǐng)求的結(jié)果
      })
      .catch(err=>{
        console.log(err)
      })
    }
  }

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

Axios攔截器配置

main.js

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

分別定義一個(gè)請(qǐng)求攔截器(請(qǐng)求開(kāi)始時(shí)執(zhí)行某些操作)、響應(yīng)攔截器(接受到數(shù)據(jù)后執(zhí)行某些操作),之間分別設(shè)置攔截時(shí)執(zhí)行的操作,改變state內(nèi)isShow的布爾值從而控制loading組件在觸發(fā)請(qǐng)求數(shù)據(jù)開(kāi)始時(shí)顯示loading,返回?cái)?shù)據(jù)時(shí)隱藏loading

特別注意:這里有一個(gè)語(yǔ)法坑(我可是來(lái)來(lái)回回踩了不少次)main.js中調(diào)取、操作vuex state中的數(shù)據(jù)不同于組件中的this.$store.state,而是直接store.state 同上面代碼

效果展示

總結(jié)

以上所述是小編給大家介紹的Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!

相關(guān)文章

  • vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能

    vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能

    這篇文章主要介紹了vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • 詳解Vue2.X的路由管理記錄之 鉤子函數(shù)(切割流水線)

    詳解Vue2.X的路由管理記錄之 鉤子函數(shù)(切割流水線)

    本篇文章主要介紹了Vue2.X的路由管理記錄之 鉤子函數(shù)(切割流水線),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Vue加入購(gòu)物車(chē)判斷token添加登錄提示功能

    Vue加入購(gòu)物車(chē)判斷token添加登錄提示功能

    加入購(gòu)物車(chē),是一個(gè)登錄后的用戶 才能進(jìn)行的操作,所以需要進(jìn)行鑒權(quán)判斷,判斷用戶token是否存在,這篇文章主要介紹了Vue加入購(gòu)物車(chē)判斷token添加登錄提示,需要的朋友可以參考下
    2023-11-11
  • vue3的自定義指令directives實(shí)現(xiàn)

    vue3的自定義指令directives實(shí)現(xiàn)

    本文主要介紹了vue3的自定義指令directives實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)

    vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)

    這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例

    Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例

    這篇文章主要介紹了Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-11-11
  • vue-cli如何快速構(gòu)建vue項(xiàng)目

    vue-cli如何快速構(gòu)建vue項(xiàng)目

    本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-04-04
  • vue接入下載文件接口問(wèn)題

    vue接入下載文件接口問(wèn)題

    這篇文章主要介紹了vue接入下載文件接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • vuex中Getter的用法詳解

    vuex中Getter的用法詳解

    這篇文章主要給大家介紹了關(guān)于Vuex中Getter的基本使用教程,getter相當(dāng)于Vuex中的計(jì)算屬性 對(duì) state 做處理再返回,本文通過(guò)示例代碼將Getter介紹的非常詳細(xì),需要的朋友可以參考下
    2021-07-07
  • Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序

    Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序

    這篇文章主要介紹了Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下
    2023-09-09

最新評(píng)論