在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何做到所有請求完成loading消失?

如何做到所有請求完成loading消失?

RT.
Vue項目,封裝了一層axios,只要調(diào)用axios就出現(xiàn)loading,然后在axios響應(yīng)攔截器處讓loading消失,這就導(dǎo)致了第一個請求完成后loading消失,后面的請求pending半天,用戶總是感覺沒數(shù)據(jù),覺得現(xiàn)在唯一的辦法是得知最后一個請求的狀態(tài)

回答
編輯回答
別傷我

如果有些請求需要顯示loading,有些不需要顯示,這種方式可能就不太適用。。。

2017年4月1日 18:51
編輯回答
維他命

官方例子:
function getUserAccount() {
return axios.get('/user/12345');
}

function getUserPermissions() {
return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {

// Both requests are now complete

}));

2017年2月20日 14:47
編輯回答
入她眼

方案1. 七個請求做成隊列,第一個完成再請求第二個。以此類推直到最后一個結(jié)束
方案2. 七個請求任意一個完成之后檢查當(dāng)前完成數(shù)(可以是簡單的計數(shù)),如果滿七干嘛干嘛,否則啥都不干

現(xiàn)在流行的 Promise 也可以,不過暫時不會用

2018年3月21日 20:07
編輯回答
幼梔

比較好的方式是全局統(tǒng)一攔截器,js是單線程的,所以使用一個變量記錄下當(dāng)前進行中的請求

let requestingCount = 0;

const handleRequestLoading = () => {
  if (!requestingCount)  startLoading()
  requestingCount++
}
const handleResponseLoading = () => {
  requestingCount--
  if (!requestingCount)  stopLoading()
}

axiosInstance.interceptors.request.use(config => {
    handleRequestLoading()
  },() => {
    handleResponseLoading()
  })

axiosInstance.interceptors.response.use(response => {
    handleResponseLoading()
  }, error => {
    handleResponseLoading()
  })
2017年7月10日 14:48
編輯回答
選擇

非常感謝大家的解答,現(xiàn)在已經(jīng)解決,自答一下,如果有更好的方法希望大家分享一下,謝謝

  var num = 0
  axios.interceptors.request.use(function (config) {  //在請求發(fā)出之前進行一些操作
    num++
    _bus.$emit('showloading')
    return config
  }

  axios.interceptors.response.use(response => {        // 接受請求后num--,判斷請求所有請求是否完成
    num--
    if (num <= 0) {
      _bus.$emit('closeLoading')      
    } else {
      _bus.$emit('showloading')      
    }
  })
2017年1月24日 19:40
編輯回答
風(fēng)清揚
// 偽代碼

showLoading();
const loads = urls.map(url => ajax(url));
await Promise.all(loads);
hideLoading();
2018年2月5日 05:01
編輯回答
半心人
let p1 = new Promise((resolve, reject) => {
    resolve(1);
})
let p2 = new Promise((resolve, reject) => {
    resolve(2);
})
let p3 = new Promise((resolve, reject) => {
    resolve(3);
})
Promise.all([p1, p2, p3]).then(values => { 
    console.log(values); 
});
2018年3月25日 10:17