vue2-ElementUI-加载效果

前提：

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 = nullaxios.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
})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。