第一步：封裝一個request.js 後面直接引用

request.js 檔案如下，直接複製就可以用，裡面有些程式碼註釋掉了，不用管，我也沒有仔細研究

import axios from 'axios'
import { Message } from 'element-ui'
import qs from 'qs'
import store from '@/store'
import { getToken } from '@/utils/auth'
// import Qs from 'qs'

// 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: 10000 // request timeout,

  // transformRequest:[function(data) {
  //   //return data;
  //   return Qs.stringify(data)
  // }]

})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }

    if (config.method === 'post') {
      if (config.headers['Content-Type'] !== 'multipart/form-data' &&
        config.headers['Content-Type'] !== 'application/problem+json' &&
        config.headers['Content-Type'] !== 'application/json'
      ) {
        config.data = qs.stringify(config.data)
      } else {
        config.data = config.data
      }
    }

    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
   */
  response => {
    const res = response.data
    // console.log(res)
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200 && res.code !== 0) {
      switch (Number(res.code)) {
        case 202:
          // Message({
          //   message: res.msg || '新增失敗',
          //   type: 'error',
          //   duration: 3000
          // })
          break
        case 204:
          // Message({
          //   message: res.msg || '賬號或密碼不正確',
          //   type: 'error',
          //   duration: 3000
          // })
          break
        case 401:
          // Message({
          //   message: res.msg || '無權訪問',
          //   type: 'error',
          //   duration: 3000
          // })
          break
        case 403:
          // Message({
          //   message: res.msg || '登入失效',
          //   type: 'error',
          //   duration: 3000
          // })
          setTimeout(() => {
            store.dispatch('user/resetToken').then(() => {
              location.reload()
            })
          }, 1000)
          break
        case 500:
          // Message({
          //   message: res.msg || '系統請求失敗',
          //   type: 'error',
          //   duration: 3000
          // })
          break
        case 501:
          // Message({
          //   message: res.msg || '系統快取失敗',
          //   type: 'error',
          //   duration: 3000
          // })
          break
        default:
          // Message({
          //   message: '請求超時，請稍後重試', // error.msg
          //   type: 'error',
          //   duration: 5 * 1000
          // })
          return res
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // console.log('err' + error) // for debug
    // Message({
    //   message: error.message,
    //   type: 'error',
    //   duration: 5 * 1000
    // })
    return Promise.reject(error)
  }
)

export default service

第二步：在view 專案中建立一個資料夾，和js 檔案來存放後臺引用的介面

supervisionNotice.js 檔案如下：

import request from '@/utils/request'

// 新增通知公告
export function AddAnnouncement(data) {
  return request({
    url: '/announcement/addAnnouncement',
    method : 'post',
    headers: { 'Content-Type': 'application/json' },
    data
  })
}

// 修改通知公告
export function UpdateAnnouncement(data) {
  return request({
    url: '/announcement/updateAnnouncement',
    method : 'post',
    headers: { 'Content-Type': 'application/json' },
    data
  })
}

//通知公告列表
export function AnnouncementList(data) {
  return request({
    url: '/announcement/getAnnouncementLists',
    method : 'get',
    params : data
  })
}

//獲取通知公告詳情
export function GetAnnouncementById(data) {
  return request({
    url: '/announcement/getAnnouncementById',
    method : 'get',
    params : data
  })
}

//刪除通知公告
export function DelAnnouncement(data) {
  return request({
    url: '/announcement/delAnnouncement',
    method : 'post',
    data
  })
}

　　說明下

第三步：在頁面中開始呼叫對應的介面

表達能力有限，不知道寫清楚了沒有，可能只有自己懂自己記錄了個啥吧！