vue2-ElementUI-加载效果_elementui加载效果

前提：

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

使用方法：

1. 从ElementUI 中导入 Loading- - -

import { Loading } from 'element-ui';
1

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
})
1
2
3
4
5
6
7
8

b. 请求成功得到响应结果后，关闭加载效果，配置- - -axios.interceptors.response.use() 方法

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

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

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