前提:

  1. 安装了 axios
  2. 安装了ElementUI

使用方法:

1. 从ElementUI 中导入 Loading- - -

import { Loading } from 'element-ui';

2. 配置 axios 的请求和响应相关方法

axios.interceptors.request.use() 和 axios.interceptors.response.use() 都接收两个回调函数,第一个是成功的回调函数,第二个是失败的回调函数,失败的可以省略不写

a. 请求时,显示加载效果,配置- - -axios.interceptors.request.use() 方法

重点:调用- - - Loading.service() ,开始加载效果

// 声明请求拦截器
let loadingInstance = null
axios.interceptors.request.use((config) => {
  // 开启加载效果,全屏加载
  loadingInstance = Loading.service({ fullscreen: true})
  // 固定写法,返回请求成功结果
  return config
})
b. 请求成功得到响应结果后,关闭加载效果,配置- - -axios.interceptors.response.use() 方法

重点:调用- - - 加载对象.close(),关闭加载效果

// 声明相应拦截器
axios.interceptors.response.use((response) => {
  // 关闭加载效果
  loadingInstance.close()
  // 固定写法,返回相应成功结果
  return response
})

更多具体使用方法参考官网文档:https://element.eleme.cn/#/zh-CN/component/loading

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐