A complete tutorial on using axios encapsulation in vue

	npm install axios -S
	Or npm i axios -S

	import axios from 'axios'
	Vue.prototype.$axios = axios //Bind axios to the prototype of Vue

	module.exports = {
	 publicPath: './',
	 //Configure cross-domain requests devServer: {
	  open: true, //Whether to automatically open the browser https: false, //Whether to enable https
	  hotOnly: false,
	  proxy: { // Configure cross-domain '/api': {
	    target: 'http://********', //Request interface domain name ws: true,
	    secure: false,
	    changOrigin: true, //Whether to allow crossing pathRewrite: {
	     '^/api': ''
	    }
	   }
	  },
	  before: app => { }
	 }
	}

import axios from 'axios'
//Here we reference element's loading full screen loading import { Loading } from "element-ui";

const service = axios.create({
 baseURL: '/',
 timeout: 30000 // Set request timeout})
let loading = "";
// Request interceptor service.interceptors.request.use(
 (config) => {
  // Do some processing before the request is sent if (!(config.headers['Content-Type'])) {
   loading = Loading.service({
    lock: true,
    text: "Loading...",
    spinner: "el-icon-loading",
    background: "rgba(255,255,255,0.7)",
    customClass: "request-loading",
   });
   if (config.method == 'post') {
    config.headers['Content-Type'] =
     'application/json;charset=UTF-8'
    for (var key in config.data) {
     if (config.data[key] === '') {
      delete config.data[key]
     }
    }
    config.data = JSON.stringify(config.data)
   } else {
    config.headers['Content-Type'] =
     'application/x-www-form-urlencoded;charset=UTF-8'
    config.data = JSON.stringify(config.data)
   }
  }
  const token = "token"
  // Let each request carry a token-- ['X-Token'] is a custom key. Please modify it according to the actual situation. if (token) {
   config.headers['Authorization'] = token
  }
  return config
 },
 (error) => {
  loading.close();
  // Sending failed console.log(error)
  return Promise.reject(error)
 }
)

// Response interceptor service.interceptors.response.use(
 (response) => {

  loading.close();
  // dataAxios is the data returned by axios
  // loadingInstance.close();
  const dataAxios = response.data
  // This status code is the return dataAxios agreed with the backend
 },
 (error) => {
  return Promise.reject(error)
 }
)

	export default service

 // Import the packaged axios
 // ps: If there is no encapsulation, you can import axios from "./api";
	// /api is the path variable for configuring cross-domain let reportUpload= '/api/report/upload'
  export const Upload= () => {
   return axios.get( reportUpload )
  }

//Introduce the encapsulated interface import { Upload} from "@/api/http.js"; 

// Call using async Upload() {
  let { result } = await getlist ();
  	console.log(result)
 },