Several ways to encapsulate axios in Vue

import axios from 'axios'
import { Message, Loading } from 'element-ui'
const ConfigBaseURL = 'https://localhost:3000/' //Default path, you can also use env to determine the environment let loadingInstance = null //Here is loading
//Use the create method to create an axios instance export const Service = axios.create({
  timeout: 7000, // Request timeout baseURL: ConfigBaseURL,
  method: 'post',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// Add request interceptor Service.interceptors.request.use(config => {
  loadingInstance = Loading.service({
    lock: true,
    text: 'loading...'
  })
  return config
})
// Add response interceptor Service.interceptors.response.use(response => {
  loadingInstance.close()
  // console.log(response)
  return response.data
}, error => {
  console.log('TCL: error', error)
  const msg = error.Message !== undefined ? error.Message : ''
  Message({
    message: 'Network error' + msg,
    type: 'error',
    duration: 3 * 1000
  })
  loadingInstance.close()
  return Promise.reject(error)
})

import {Service} from './Service'
export function getConfigsByProductId(productId) {
  return Service({
    url: '/manager/getConfigsByProductId',
    params: { productId: productId }
  })
}
export function getAllAndroidPlugins() {
  return Service({
    url: '/manager/getAndroidPlugin ',
    method: 'get'
  })
}
export function addNewAndroidPlugin(data) {
  return Service({
    url: '/manager/addAndroidPlguin',
    data: JSON.stringify(data)
  })
}

import {getAllAndroidPlugins,getConfigsByProductId,addNewAndroidPlugin} from '@/api/request.js'

getAllAndroidPlugins()
.then(res=>{

})

import {Service} from '@/api/Service.js'
Vue.prototype.$axios=Service

//Service.js
import axios from 'axios'
const ConfigBaseURL = 'https://localhost:3000/' //Default path, you can also use env to determine the environment //Use the create method to create an axios instance export const Service = axios.create({
  timeout: 7000, // Request timeout baseURL: ConfigBaseURL,
  method: 'post',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// Add request interceptor Service.interceptors.request.use(config => {
  return config
})
// Add response interceptor Service.interceptors.response.use(response => {
  // console.log(response)
  return response.data
}, error => {
  return Promise.reject(error)
})

import to from 'await-to-js'
export function isObj(obj) {
  const typeCheck = typeof obj!=='undefined' && typeof obj === 'object' && obj !== null 
  return typeCheck && Object.keys(obj).length > 0
}
export async function _get(url, qs,headers) {
  const params = {
    url,
    method: 'get',
    params: qs ? qs : ''
  }
  if (headers) { params.headers = headers }
  const [err, res] = await to(Service(params))
  if (!err && res) {
    return res
  } else {
    return console.log(err)
  }
}

export async function _get(url, qs,headers) {
  const params = {
    url,
    method: 'get',
    params: isObj(qs) ? qs : {}
  }
  if (isObj(headers)) {params.headers = headers}
  const [err, res] = await to(Service(params))
  if (!err && res) {
    return res
  } else {
    return console.log(err)
  }
}

export async function _post(url, qs, body) {
  const params = {
    url,
    method: 'post',
    params: isObj(qs) ? qs : {},
    data: isObj(body) ? body : {}
  }
  const [err, res] = await to(Service(params))
  if (!err && res) {
    return res
  } else {
    return console.log(err)
  }
}

//a.vue
<script>
import{_get}from './Service'
export default{
	methods:{
    	async test(){
        const res = await _get('http://baidu.com')
       }
    }
}
</script>