api封裝，封裝api 這么多年都不和別人說的秘技，超好用，簡單只需2步

第一步：在src下面新建utils檔案夾，新建個request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'//請根據自己的情況自信修改
import store from '../store'  

**封裝api，能有啥秘技，就皮一下，吼，很開心**

// 創建axios實體
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  /* baseURL: window.glod.baseApi, // api 的 base_url*/
  timeout: 50000 // 請求超時時間
})

// request攔截器
service.interceptors.request.use(
  config => {
    // config.headers['Content-Type'] = 'application/json'
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
       // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 攔截器
service.interceptors.response.use(
  response => {
    /**
     * code為201-206的暫時定為正確 可結合自己業務進行修改
     */
    const res = response
    if (res.status < 200 || res.status > 299) {
      Message({
        message: res.statusText,
        type: 'error',
        duration: 5 * 1000
      })

      if (res.status === 401 || res.status === 403) {
        MessageBox.confirm(
          '你已被登出，可以取消繼續留在該頁面，或者重新登錄',
          '確定登出',
          {
            confirmButtonText: '重新登錄',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('oidc/signOutOidc');
        })
      }
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    if (error.response) {
      Message({
        message: error.response.data.error.details,
        type: 'error',
        duration: 5 * 1000
      })
      console.log('err' + error.response.data) // for debug
    } else {
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
      })
      console.log('err' + error.message) // for debug
    }
    return Promise.reject(error)
  }
)

export default service

第二步：在src下面新建api檔案夾，新建api.js

import request from "@/utils/request";
import qs from 'qs'

	// get請求方式
	export function getConsumeByPhone(query) {
	  return request({
	    url: `/v1_consume/getConsumeByPhone`,
	    method: "get",
	    params: query
	  });
	}
	
// post請求方式
export function addLeaveMessage(query) {
  return request({
    url: `/v2_leave/addLeaveMessage`,
    method: "post",
    data: qs.stringify(query),
  });
}

 //delete請求方式
   export function deleteByIdCard(id) {
     return request({
       url: `/card/deleteById/${id.id}/${id.updater}`,
       method: "delete"
    });
   }
   
//下面說說data資料上傳

//當action為get時候，瀏覽器用x-www-form-urlencoded的編碼方式把form資料轉換成一個字串
（name1=value1&name2=value2…），然后把這個字串append到url后面，用?分割，加載這個
新的url，

export function getOpenId(query) {
  return request({
    url: `/v1_auth/getOpenId`,
    method: "post",
    data: qs.stringify(query),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

// data上傳2
export function getCode(query) {
  return request({
    headers: {
      'Content-Type': 'application/json'
     },
    url: `/v1_global/getCode`,
    method: "post",
    data: qs.stringify(query),
  });
}
// **當action為post時候，瀏覽器把form資料封裝到http body中，然后發送到server，
 如果沒有type=file的控制元件，用默認的application/x-www-form-urlencoded就可以了， 
 但是如果有type=file的話，就要用到multipart/form-data了，瀏覽器會把整個表單以控制元件
 為單位分割，并為每個部分加上Content-Disposition(form-data或者file),Content-Type
 (默認為text/plain),name(控制元件name)等資訊，并加上分割符(boundary)，**

export function upload(query) {
  return request({
    headers: {
      'Content-Type': 'multipart/form-data'
     },
    url: `v1_global/upload`,
    method: "post",
    data: query
  });
}
	//  data上傳4
	export function uploadFace(query) {
	  return request({
	    headers: {
	      'Content-Type': 'applic/v1_pFace/uploadFace'
	    },
	    url: `/v1_pFace/uploadFace`,
	    method: "post",
	    data: query
	  });
	}
	
	import { uploadFace } from '@/api/api' vue語法其他頁面使用方式!

上傳二進制資料;它告訴我們傳輸的資料要用到多媒體傳輸協議，由于多媒體傳輸的都是大量的資料，所以規定上傳檔案必須是post方法，的type屬性必須是file，form里面的input的值以2進制的方式傳過去，所以request就得不到值了，傳輸到你的servlet里是二進制資料，包括那個title，所以你用request.getParameter(“title”)是得不到值的，必須把資料再換為String的，