axios使用element-ui配置Loading

使用的vue-cli搭建的环境,常规全局引入的element-ui

main.js中

import Element from 'element-ui'

在request.js

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

let loadingInstance;

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 200000,
  // 是否loading
  showLoading: false
})

// request拦截器
service.interceptors.request.use(config => {
  //加载loading
  if (config.showLoading) {
    loadingInstance = Loading.service({
      fullscreen: true, // 同 `v-loading` 指令中的 `fullscreen` 修饰符
      text: '正在加载', // 显示在加载图标下方的加载文案
      spinner: 'el-icon-loading', // 自定义加载图标类名
      background: 'rgba(0, 0, 0, 0.7)'
    });
  }
  return config
}, error => {
  Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  //关闭loading
  if (res.config.showLoading) {
    loadingInstance.close();
  }
  return res.data
})

export default service

在请求api.js

import request from '@/utils/request'

export function submitDocument(query) {
  return request({
    url: '/xxxxxxxxxxx/xxxx/xxxxxxxx',
    method: 'get',
    params: query,
    showLoading: true // 传入这个判断是否loading
  })
}