axios 同时多个请求_Vue 封装axios实现多个请求合并为一次 loading

可以使用axios的拦截器来实现多个请求合并为一次loading的效果。具体实现步骤如下：

1. 在封装axios的文件中，定义一个计数器，用来记录当前页面需要发送的请求个数。

2. 在axios的请求拦截器中，将计数器加1。

3. 在axios的响应拦截器中，将计数器减1。

4. 在响应拦截器中判断计数器是否为0，如果为0则表示当前页面所有请求都已经完成，可以隐藏loading了。

下面是代码示例：

import axios from 'axios'
import { Loading } from 'element-ui'

let loadingInstance = null // loading实例
let reqCount = 0 // 计数器

function showLoading () {
  if (reqCount === 0) {
    loadingInstance = Loading.service({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
  }
  reqCount++
}

function hideLoading () {
  reqCount--
  if (reqCount === 0) {
    loadingInstance.close()
  }
}

const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    showLoading()
    return config
  },
  error => {
    hideLoading()
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    hideLoading()
    return response.data
  },
  error => {
    hideLoading()
    return Promise.reject(error)
  }
)

export default service

在以上代码中，我们使用了element-ui的loading组件来实现loading效果。在请求拦截器中调用showLoading方法显示loading，在响应拦截器中调用hideLoading方法隐藏loading。计数器reqCount用来记录当前页面需要发送的请求个数，当计数器为0时，说明所有请求都已经完成，可以隐藏loading了。