element ,vantUI寫數據加載延時出現loading

element:


let loading;
// 出現請求過慢時loading出現
var clearSettimeout;
function startLoading() {
  clearSettimeout = setInterval(() => {
    loading = Loading.service({
      lock: true,
      text: "努力加載中……",
      background: "rgba(0, 0, 0, 0.1)"
    });
  }, 3000);
}
function endLoading() {
  clearTimeout(clearSettimeout);
  clearSettimeout = null;
  if (loading) {
    loading.close();
  }
}
// loading互不衝突調用
let needLoadingRequestCount = 0;

export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading();
  }
  needLoadingRequestCount++;
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return;
  needLoadingRequestCount--;
  if (needLoadingRequestCount === 0) {
    endLoading();
  }
}

// 默認超時設置
/* eslint-disable */

// axios.defaults.timeout = 60000 * 10
axios.defaults.timeout = 60000 * 2
// 相對路徑設置
axios.defaults.baseURL = ''
// loading圖

// http request 攔截器
axios.interceptors.request.use(
  config => {
    // 設置參數格式
    if (!config.headers['Content-Type']) {
      config.headers = {
        'Content-Type': 'application/json'
      }
    }
    // 判斷ie加時間戳防止不請求接口
    if (window.ActiveXObject || 'ActiveXObject' in window) {
      config.url = `${config.url}?time=${new Date().getTime()}`
    }
    showFullScreenLoading()

    return config
  },
  err => {
    return Promise.reject(err)
  }
)
// http response 攔截器
axios.interceptors.response.use(
  response => {
    tryHideFullScreenLoading()
    return response
  },
  error => {
    // tryHideFullScreenLoading()
    return Promise.reject(error)
  }
)

vantUi:

let loading;
var clearSettimeout;
function startLoading() {
  clearSettimeout = setInterval(function() {
    loading = Toast.loading({
      message: "加載中...",
      forbidClick: true,
      duration: 0
    });
  }, 600);
}

function endLoading() {
  clearTimeout(clearSettimeout);
  clearSettimeout = null;
  Toast.clear();
}
// loading互不衝突調用
let needLoadingRequestCount = 0;

export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading();
  }
  needLoadingRequestCount++;
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return;
  needLoadingRequestCount--;
  if (needLoadingRequestCount === 0) {
    endLoading();
  }
}

// 默認超時設置
/* eslint-disable */

// axios.defaults.timeout = 60000 * 10
axios.defaults.timeout = 60000 * 2
// 相對路徑設置
axios.defaults.baseURL = ''
// loading圖

// http request 攔截器
axios.interceptors.request.use(
  config => {
    // 設置參數格式
    if (!config.headers['Content-Type']) {
      config.headers = {
        'Content-Type': 'application/json'
      }
    }
    // 設置token 
    // // 非登錄需要token
    // if( !config.url == process.env.VUE_APP_URL+'/home'){
    //   if(Cookie.get("token")){
    //       config.data.token = Cookie.get("token")
    //   }else{
    //     router.push({ name: "Home" });
    //   }
    // }
    // 判斷ie加時間戳防止不請求接口
    if (window.ActiveXObject || 'ActiveXObject' in window) {
      config.url = `${config.url}?time=${new Date().getTime()}`
    }
    showFullScreenLoading()
    return config
  },
  err => {
    return Promise.reject(err)
  }
)
// http response 攔截器
axios.interceptors.response.use(
  response => {
    // window.console.log(response)
    tryHideFullScreenLoading()
    return response
  },
  error => {
    tryHideFullScreenLoading()
    return Promise.reject(error)
  }
)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章