Loding效果封装

安装依赖支持

1. 封装之前的准备，也可以在用到时候再去npm下载支持

// 依赖
import ElementUI, { Message, Loading } from 'element-ui'
import Cookies from 'js-cookie'

let loading // 定义loading变量

因为封装的Loding是通过在Vue的请求拦截器判断axios请求发送与否去显示隐藏全局的Loding
所以简便一点，请求必然会携带cookie，通过判断cookie的变化来控制Loding的显示与隐藏，js-cookie因此而存在
其次Element_UI里有成熟的Loding解决方案，并且也能较好与Vue兼容，也可以自己写
在一个代码优化定义一个Loding变量。

1. 引入并使用Element中的Loding开始于结束并定义好方法


// 使用Element loading-start 方法
function startLoading () {
  loading = Loading.service({
    lock: true,
    text: '加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}

// 使用Element loading-close 方法
function endLoading () {
  loading.close()
}

1. 接下来要做的就是showFullScreenLoading() tryHideFullScreenLoading()要干的事儿就是将同一时刻的请求合并。

// 声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1 。
// 调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。

let needLoadingRequestCount = 0

<!-- 开启loding 要做的事封装 -->
export function showFullScreenLoading () {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

<!-- 关闭loding 要做的事 -->
export function tryHideFullScreenLoading () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

1. 什么时候调用和停止loding
- 判断什么时候调用loding和关闭loding之前需要先引入js-cookie插件
- http 请求拦截器中判断cookie中携带的参数，状态等如果结果为undefined则什么都不做，如果cookie中包含用户状态…
- 如果请求出错，后端返回错误提示信息等，这时也结束loding


// http request 拦截器
axios.interceptors.request.use(config => {
  var token = ''
  if (typeof Cookies.get('user') === 'undefined') {
    // 此时为空
  } else {
    token = JSON.parse(Cookies.get('user')).token
  } // 注意使用的时候需要引入cookie方法，推荐js-cookie
  config.data = JSON.stringify(config.data)
  config.headers = {
    'Content-Type': 'application/json'
  }
  if (token !== '') {
    config.headers.token = token
  }
  showFullScreenLoading()
  return config
},
(errors) => {
  return Promise.reject(errors)
}
)

// axios拦截返回体
// http response 拦截器
axios.interceptors.response.use(
  res => {
    // 判断是否正确返回
    // TODO 没有权限也是这里判断
    if (res.data.statusCode === 2001) {
      Message.error('请登录后重试')
      router.push('/login')
      return res
    }
    if (res.data.statusCode !== 1) {
      Message.error(res.data.msg)
    }
    tryHideFullScreenLoading()
    return res
  })

大体算封装完成，但具体用的时候还需根据不同页面具情况修改代码，并不能拿到就用。