axios 配置loading_用Axios Element 实现全局的请求 loading

Kapture 2018-06-07 at 14.57.40.gif

背景

业务需求是这样子的，每当发请求到后端时就触发一个全屏的 loading，多个请求合并为一次 loading。

现在项目中用的是 vue 、axios、element等，所以文章主要是讲如果使用 axios 和 element 实现这个功能。

分析

首先，请求开始的时候开始 loading， 然后在请求返回后结束 loading。重点就是要拦截请求和响应。

然后，要解决多个请求合并为一次 loading。

最后，调用element 的 loading 组件即可。

拦截请求和响应

axios 的基本使用方法不赘述。笔者在项目中使用 axios 是以创建实例的方式。

// 创建axios实例

const $ = axios.create({

baseURL: `${URL_PREFIX}`,

timeout: 15000

})

然后再封装 post 请求(以 post 为例)

export default {

post: (url, data, config = { showLoading: true }) => $.post(url, data, config)

<