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

为了实现多个请求合并为一次 loading，可以使用 axios 的并发请求功能。具体实现步骤如下：

1. 安装 axios 和 lodash 库：`npm install axios lodash --save`

2. 在 Vue 项目中创建一个 axios.js 文件，封装 axios 请求：

import axios from 'axios'
import { debounce } from 'lodash'

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

let loadingInstance = null // loading 实例

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 如果没有 loading 实例，则创建一个
    if (!loadingInstance) {
      loadingInstance = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 请求完成，关闭 loading
    if (loadingInstance) {
      loadingInstance.close()
      loadingInstance = null
    }
    return response.data
  },
  error => {
    // 请求完成，关闭 loading
    if (loadingInstance) {
      loadingInstance.close()
      loadingInstance = null
    }
    return Promise.reject(error)
  }
)

// 合并请求函数
const mergeRequest = function (requests) {
  return service.all(requests)
}

// 导出合并请求函数
export default debounce(mergeRequest, 1000)

3. 在组件中使用合并请求函数：

import mergeRequest from '@/axios'

// 合并请求示例
const request1 = service.get('/api/user')
const request2 = service.get('/api/orders')

mergeRequest([request1, request2]).then(res => {
  console.log(res)
})

注意：在请求拦截器中创建 loading 实例时，需要使用 Vue 实例的 `$loading` 方法。如果在 axios.js 文件中无法获取到 Vue 实例，可以在 main.js 文件中将 Vue 实例挂载到全局变量中，然后再在 axios.js 文件中引用。