1.request方式

import request from '@/utils/request'
/* 借款管理************************************************************** */
const urlConfig = require('urlConfig') // 公用接口地址
const base = urlConfig.ykbase

export default {
  ...
  // 借款-主页-查询列表接口
  pagingQuery(para) {
    return request({   // ① post方式
      url: `${base}jkgl/grjk/pagingQuery`,
      method: 'post',
      data: para
    })
  },
  // 删除
  deletion(para)
  // 下拉框****
  // 下拉框---公司
  getGs(query) {
    return request({   // ① get方式
      url: `${base}jkgl/grjk/getGs`,
      method: 'get',
      params: query
    })
  },
  ...
}

request.js

import axios from 'axios'
import { Message, Notification, Loading } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'

// 开始加载动画
let loading
function startLoading() {
  loading = Loading.service({
    lock: true, // 是否锁定
    text: '正在交互...', // 加载中需要显示的文字
    background: 'rgba(0,0,0,.7)'// 背景颜色
  })
}
// 结束加载动画
function endLoading() {
  loading.close()
}
// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  // timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  // 遮挡曾关
  // Loading.service({ fullscreen: true }),
  config => {
    // do something before request is sent
    // if (config.method === 'post') {
    //   config.data = config.params
    //   config.params = {}
    // }
    startLoading()
    if (localStorage.getItem('token')) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['api_key'] = localStorage.getItem('token')
      // return
    }
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  // 遮挡曾关
  // Loading.service({ fullscreen: false }),
  response => {
    endLoading()
    const res = response.data
    // console.log(res)
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 0 || res.code !== 200) {
      if (res.warr === true) {
        Notification({
          title: '警告',
          message: res.warrmsg,
          type: 'warning'
        })
      }
      return res
    } else {
      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(new Error(res.msg || 'Error'))
    }
  },
  error => {
    endLoading()
    console.log('err' + error) // for debug
    Message({
      message: error.msg,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

2.axios方式

xxx.js 某一具体的接口文件

import { axios } from './axios'
/* 借款管理************************************************************** */
const urlConfig = require('urlConfig')
const base = urlConfig.ykbase

// 借款-主页-查询列表接口   post方式
export const pagingQuery = params => { return axios.post(`${base}jkgl/grjk/pagingQuery`, params).then(res => res.data) }
// 下拉框****
// 下拉框---公司    get方式
export const getGs = params => { return axios.get(`${base}jkgl/grjk/getGs`, { params: params }) }

axios.js

import axios from 'axios'
import { Loading, Message } from 'element-ui'// 引入Loading服务
// 创建 axios 实例
const service = axios.create({

})
// 开始加载动画
let loading
function startLoading() {
  loading = Loading.service({
    lock: true, // 是否锁定
    text: '正在交互...', // 加载中需要显示的文字
    background: 'rgba(0,0,0,.7)'// 背景颜色
  })
}
// 结束加载动画
function endLoading() {
  loading.close()
}
// request interceptor
service.interceptors.request.use(config => {
  var tokenjava = localStorage.getItem('tokenjava')
  var token = localStorage.getItem('token')
  startLoading()
  // alert('qingqiu')
  if (token) {
    config.headers[ 'api_key' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  if (tokenjava) {
    config.headers[ 'api_key' ] = tokenjava // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  // if (token) {
  //   config.headers[ 'api_key' ] = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJ7XCJMb2dpblRpbWVcIjpcIjIwMjEtMDEtMjggMTY6MTI6NDFcIixcIk9pZFwiOlwiMDAwMDAwMDAtMDAwMC0wMDAwLTAwMDAtMDAwMDAwMDAwMDAxXCJ9In0.HLCV0r7KP3rOpyWbLuvGYXo1uaAPQ_-lON03QWxoMAA'
  // }
  // if (tokenjava) {
  //   config.headers[ 'api_key' ] = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJ7XCJMb2dpblRpbWVcIjpcIjIwMjEtMDEtMjggMTY6MTI6NDFcIixcIk9pZFwiOlwiMDAwMDAwMDAtMDAwMC0wMDAwLTAwMDAtMDAwMDAwMDAwMDAxXCJ9In0.HLCV0r7KP3rOpyWbLuvGYXo1uaAPQ_-lON03QWxoMAA'
  // }
  return config
}, (error) => {
  return Promise.reject(error)
})
// 相应拦截
service.interceptors.response.use(response => {
  // alert('end')
  endLoading()// 结束加载动画
  return response // 结束时把response return回去
}, error => {
  // 错误提醒
  endLoading()// 如果错误也结束动画
  Message.error(error.response.data)
  return Promise.reject(error)
})
export { service as axios }