axios配置全局loading

一个人可以走很远，但是一群人会走的更远。独立开发时，用到的技术大多都是自己熟悉的，即使有一些问题也能有办法解决过去，但是当作为组员参加项目时，有时会惊讶于别人的写法。这次就是借鉴了上家公司前台架构的想法，使得我们的开发更加的方便简洁。本次的主题就是loading。

相信大家都会有自己的loading解决的办法，最直接也是大部分人使用的一种就是将element-ui中的loading封装成一个组件，然后再发送请求的时候去唤起这个loading组件，然后请求结束就隐藏。这个解决办法我也用了好久，直到我遇到了更高级的写法。那就是，直接在发送请求时，作为参数传递进去，想要哪个dom来loading，哪个dom就可以直接loading。

大概的调用就是这样子：

const res = await test({ loading: true, loadingDom: '.loadingdom' })

只需要这样子，这个类名为loadingdom的盒子就会有loading效果，完全不用再导入什么东西了。而且，这个页面上的盒子，你想要的哪个盒子loading都可以，大概效果就是这样子：

axios怎么处理错误状态码 案例 axios loading_axios怎么处理错误状态码 案例

十分的方便啊。以至于我在后面的项目，对这个loading的配置念念不忘。现在写出来也相当于是再回忆一波。

为了实现这个方便的效果，我们需要在封装axios的文件下加入这些代码(其实代码很少)。

// axios的封装
import axios from 'axios'
import Vue from 'vue'
const _fetch = axios.create({
  baseURL: process.env.VUE_APP_URL
})
let loading = false
function openLoading (loadingDom) {
  loading = Vue.prototype.$loading({
    lock: true,
    text: 'Loading',
    background: 'rgba(255, 255, 255, 0.7)',
    target: loadingDom || 'body'
  })
}
function closeLoading () {
  loading && loading.close()
}
/*请求拦截*/
_fetch.interceptors.request.use(
  function (config) {
    // 设置 loading
    if (config.loading) {
      openLoading(config.loadingDom)
    }

    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

/*响应拦截*/
_fetch.interceptors.response.use(
  function (res) {
    if (res.config.loading) {
      closeLoading()
    }
    return res
  },
  function (error) {
    console.log(error)
    closeLoading()
    return Promise.reject(error)
  }
)
export default _fetch

然后我们一般都会有个api的文件夹，在API定义的时候，我们这样子传入就行了

import _fetch from './request'
function test (loadingObj) {
  return _fetch({
    url: '/getlist/test',
    method: 'get',
    ...loadingObj
  })
}
export { test }

当然，如果是post请求，那你就前面加一个参数嘛。

function test (data,loadingObj) {
  return _fetch({
    url: '/getlist/test2',
    method: 'post',
    data,
    ...loadingObj
  })
}

调用的话，你可以直接这样子调用，如果不需要loading效果，那么直接不传就行了。

const res = await test({ loading: true, loadingDom: '.loadingdom' })

总结下来就是：

1.在axios中统一配置

2.在定义api的时候多加一个参数

3.在调用axios的时候传入这个参数

代码地址：https://github.com/rui-rui-an/loadingdemo

大家试一试的时候记得调成slow 3g，不行看不出来。如果想换其他盒子loading，那么改loadingDom: '.loadingdom’后面的就行了。