current position:Home>Vue3 network request adding loading

Vue3 network request adding loading

2022-06-24 09:51:43Time202051

Global add

import axios from 'axios'
import {
     ElLoading } from 'element-plus'

let loadingRequestCount = 0
let loadingInstance
const showLoading = () => {
    
  if (loadingRequestCount === 0) {
    
    loadingInstance = ElLoading.service({
     target: '#app' })
  }
  loadingRequestCount += 1
}
const hideLoading = () => {
    
  if (loadingRequestCount <= 0) return
  loadingRequestCount -= 1
  if (loadingRequestCount === 0) {
    
    // nextTick(() => {
    
    loadingInstance.close()
    // })
  }
}

const service = axios.create({
    
  // baseURL: process.env.BASE_API,
  baseURL: 'http://localhost:4500',
  timeout: 3 * 1000
})

//  Request interceptor 
service.interceptors.request.use(
  (config) => {
    
    showLoading()
    return config
  },
  (error) => {
    
    Promise.reject(error)
  }
)
service.interceptors.response.use(
  (res) => {
    
    hideLoading()
  },
  (error) => {
    
    hideLoading()
  }
)
export default service

ElLoading.service({ target: ‘#app’ })
target Adding a class name is to add... To a class name loading. The overall situation is #app

Local addition
perhaps Button to add directly

let loadingInstance: any
//  add to loading
loadingInstance = ElLoading.service({
     target: '.container_box' })
//  close laoding
loadingInstance.close()

copyright notice
author[Time202051],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/175/202206240903258575.html

Random recommended