Axios 请求自定义配置封装

// 创建request.js文件

import axios from 'axios'
import app from '@/main'

/** 创建axios实例 **/
const service = axios.create({
  baseURL: process.env.BASE_URL, // api的 base_url
  timeout: 0 // 请求超时, 0无超时时间
})

// 全局loading状态
let loading = true
let loadingUrls = []
const showLoading = (loading, config) => {
  if (loading) {
    app.$spin.show({
      render: (h) => {
        return h('div', [
          h('i', {
            'class': 'ivu-icon icon-ios-loading',
            style: {
              fontSize: '30px'
            }
          }),
          h('div', config.loadingText || 'Loading')
        ])
      }
    })
  }
}
// 判断需要全局loading的接口是否请求完成，完成则剔除
const LoadingConfig = (url) => {
 let matchIndex = loadingUrls.indexOf(url)
 if (matchIndex > -1) {
   loadingUrls.splice(matchIndex, 1)
   if (!loadingUrls.length) {
     let end = new Date().getTime()
     hideLoading(end)
   }
 }
}
// 隐藏loading
const hideLoading = (end) => {
  if (start - end < 500) {
    app.$nextTick(() => {
      setTimeout(() => {
        app.$spin.hide()
      }, 800)
    })
  } else {
    app.$nextTick(() => {
      app.$spin.hide()
    })
  }
}

/** request拦截器 ==> 对请求参数做处理 **/
service.interceptors.request.use(config => {
  // 判断是否使用全局loading
  if (!config.noLoading) {
    loadingUrls.push(config.url)
  }
  config.cancelToken = new CancelToken((c) => {
    let query = ''
    let paramsObj = {}
    // 处理传入请求参数，并将参数拼接在url后。
    config.params && Object.keys(config.params).forEach(v => {
      if (config.params[v]) {
        paramsObj[v] = config.params[v]
      }
    })
    paramsObj && Object.entries(paramsObj).forEach((item, index, arr) => {
      if (index === arr.length - 1) {
        query += item.join('=')
      } else {
        query += item.join('=') + '&'
      }
    })
  })
  // 调用全局loading
  loading = !config.noLoading
  showLoading(loading, config)

  // get 请求参数 params
  config.params = {...config.params}

  // post/patch 请求参数data
  config.data = {...config.data}

  // 请求头取值， 默认'application/json;charset=utf-8'
  config.headers['Content-Type'] = config.contentType || 'application/json;charset=utf-8'
  
  // 自定义参数，此处为接口用于分页需要
  config.headers['pageable'] = config.pageable || false

  return config
}, error => { // 请求错误处理
  app.$spin.hide()
  app.$message.warning('请求超时，请重试！')
  Promise.reject(error)
})

/** respone拦截器 ==> 对响应做处理 **/
service.interceptors.response.use(
  response => {
    LoadingConfig(response.config.url)
    // 此处可增加判断条件，返回指定数据
    if (response.data) {
      return response.data
    } else {
      app.$message.warning(response.data.message)
    }
  },
  error => { // 响应错误处理
    let res = JSON.parse(JSON.stringify(error)).response
    let text = ''
    if (res.data) {
      text = res.data.message
    }
    LoadingConfig(JSON.parse(JSON.stringify(error)).config.url)
    app.$message.warning(text)
    return Promise.reject(error)
  }
)
export default service

api 接口文件

// 创建api.js 文件
// api.js 文件引入 request.js

import service from './request'

// 根据接口需要创建参数,也可直接传入url。
export function httpLink (argumentsObj) {
  return service({
    url: argumentsObj.url || `api/${argumentsObj.id}/list`,
    method: argumentsObj.method || 'get',
    params: argumentsObj.params || {},
    data: argumentsObj.data || null,
    contentType: argumentsObj.contentType || null,
    pageable: argumentsObj.pageable || null,
    noLoading: argumentsObj.noLoading || false,
    loadingText: argumentsObj.loadingText || null
  })
}

// 调用接口

// 创建a.vue文件
import { httpLink } from './api'
async getData() {
  let obj = {
    id: 1,
    method: 'post',
    data: [],
  }
  let res = await httpLink(obj)
  // console.log(res)
}