vue2 AJAX資料請求顯示loading效果

<

template
>
<
div 
id=>
<
loading 
v-show=
"fetchloading"
>
loading
>
<
router-view
>
router-view
>
div>
template
>
<
script
>
import 
from 'vuex'
;import loading from './components/common/loading'
;export default },
computed: 
,components: 
}script
>
<
style
>
width: 100%;
height: 100%;
}style
>

/* 此js

檔案用於儲存公用的
vuex
狀態*/
import api from 
'./../../fetch/api'
import 
* as types from 
'./../types.js'
const 
state = 
const 
getters = 
const 
actions = 
, res) ,
}const 
mutations = 
}

loading元件如下：

<

template
>
<
div 
class=
"loading"
>
<
img 
src=
"./../../assets/main/running.gif" 
alt=
"">
div>
template
>
<
script
>
export default },
}script
>
<
style 
scoped
>
.loading
.loading 
imgstyle
>

// axios

的請求時間
let 
axiosdate = 
new 
date
()export function 
fetch 
(url
, params
) , 
time
)resolve
(response
.data)}
).catch((
error
) => )}
)}export default 
axiosdate = 
new 
date();
return 
fetch
(url
, params);
}}

這樣就實現了，專案中當載入資料的時候，顯示gif，當資料載入出來時消失。希望能幫到需要的人

vue資料請求loading

width 100 height 100 這裡的fetchloading是存在vuex裡面的乙個變數。在store modules common.js裡需要如下定義 此js檔案用於儲存公用的vuex狀態 import api from fetch api import as types from t...

ajax資料請求時新增loading

首先在各位閱讀本篇部落格之前先宣告一下，因為我的 功底還不是很好，所以寫出來的 會比較零散，沒有嚴謹的邏輯，如果各位大佬發現了什麼需要修改的地方，歡迎各位大佬批評指教 抱拳 阿賈克斯在資料請求時新增動畫效果有乙個前提條件，就是要把非同步設定為真 非同步請求 因為ajax非同步的設定為假時瀏覽器的渲染...

inoic請求資料與loading的顯示隱藏

可以用當前的this配置邏輯shu j var name this.setname function name this.getname function this.getdata function 可以從快取裡呼叫資料，減少請求的次數 rootscope.on loading show funct...