vue3 网络请求添加loading

全局添加

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
})

// 请求拦截器
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添加类名就是为某个类名添加loading。全局就是#app

局部添加
或者 按钮直接添加

let loadingInstance: any
// 添加loading
loadingInstance = ElLoading.service({ target: '.container_box' })
// 关闭laoding
loadingInstance.close()