axios配置全局loading
一个人可以走很远，但是一群人会走的更远。独立开发时，用到的技术大多都是自己熟悉的，即使有一些问题也能有办法解决过去，但是当作为组员参加项目时，有时会惊讶于别人的写法。这次就是借鉴了上家公司前台架构的想法，使得我们的开发更加的方便简洁。本次的主题就是loading。
相信大家都会有自己的loading解决的办法，最直接也是大部分人使用的一种就是将element-ui中的loading封装成一个组件，然后再发送请求的时候去唤起这个loading组件，然后请求结束就隐藏。这个解决办法我也用了好久，直到我遇到了更高级的写法。那就是，直接在发送请求时，作为参数传递进去，想要哪个dom来loading，哪个dom就可以直接loading。
大概的调用就是这样子：
const res = await test({loading: true, loadingDom: '.loadingdom' })
只需要这样子，这个类名为loadingdom的盒子就会有loading效果，完全不用再导入什么东西了。而且，这个页面上的盒子，你想要的哪个盒子loading都可以，大概效果就是这样子：
十分的方便啊。以至于我在后面的项目，对这个loading的配置念念不忘。现在写出来也相当于是再回忆一波。
为了实现这个方便的效果，我们需要在封装axios的文件下加入这些代码(其实代码很少)。
// axios的封装import axios from 'axios'import Vue from 'vue'const _fetch = axios.create({baseURL: process.env.VUE_APP_URL})let loading = falsefunction 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) {// 设置 loadingif (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的时候传入这个参数
代码地址：/rui-rui-an/loadingdemo
大家试一试的时候记得调成slow 3g，不行看不出来。如果想换其他盒子loading，那么改loadingDom: '.loadingdom’后面的就行了。
