在 vue 项目中，我们通常会使用 Axios 库来与后台进行数据交互。而当我们发起 ajax 请求时，常常需要在页面上显示一个加载框（Loading 效果），然后等数据返回后自动将其隐藏。要实现这个功能，我们可以在每次请求前手动显示个加载框，等收到数据后又将其隐藏。但如果每个请求要都这么做，就略显麻烦。 下面通过样例演示如何封装一个带 loading 效果的 Axios 组件，它能够对请求和响应进行拦截从而实现 loading 的自动显示与隐藏，并且在请求失败时自动弹出消息提示框显示错误信息。 1、组件封装 （1）在项目中创建一个 http.js，里面内容是对 Axios 进行二次封装，代码如下： 代码说明： 基本原理是通过axios提供的请求拦截和响应拦截的接口，控制loading的显示或者隐藏。同时在请求失败时还会自动弹出消息提示框显示错误信息。 loding效果这里采用的是Element UI中提供的Loading组件来实现。而错误消息提示框则用的是Element UI中的Message组件来实现。 内部有个计数器，确保同一时刻如果有多个请求的话，不会同时出现多个loading，而是只有1个。并且在所有请求结束后才会隐藏loading。 使用了lodash的debounce防抖。因为有时会碰到在一次请求完毕后又立刻又发起一个新的请求的情况（比如删除一个表格条目后立刻进行刷新）。这种情况会造成连续loading两次，并且中间有一次极短的闪烁。通过防抖可以让300ms间隔内的loading便合并为一次，避免闪烁的情况。 默认所有请求都会自动有loading效果。如果某个请求不需要loading效果，可以在请求header中showLoading设置为false。 默认的loading效果时全屏的（覆盖在body上）。如果某个请求是需要...