在專案中使用axios請求介面時，可以直接使用this.$axios來做，

也可以通過封裝axios的get、post、請求攔截等方法，然後可以將介面都寫在一個api.js檔案中，在vue檔案裡匯入在api裡需要用到的介面，然後使用async/await來呼叫方法，獲取資料。

實現程式碼：

1.main.js：

import axios from './config/httpConfig'

Vue.prototype.$http = axios

2.httpConfig.js：

import axios from 'axios'
import { Message } from 'element-ui'
const http = {}

var instance = axios.create({
  timeout: 5000,
  baseURL: '請求地址',  //與proxy中的api地址一致
  validateStatus(status) {
    switch (status) {
      case 400:
        Message.error('請求出錯')
        break
      case 401:
        Message.warning({
          message: '授權失敗，請重新登入'
        })
        // store.commit('LOGIN_OUT')
        setTimeout(() => {
          window.location.reload()
        }, 1000)
        return
      case 403:
        Message.warning({
          message: '拒絕訪問'
        })
        break
      case 404:
        Message.warning({
          message: '請求錯誤,未找到該資源'
        })
        break
      case 500:
        Message.warning({
          message: '服務端錯誤'
        })
        break
    }
    return status >= 200 && status < 300
  }
})
instance.defaults.headers.post['Content-Type'] = 'application/json';

// 新增請求攔截器
instance.interceptors.request.use(
  function (config) {
    // 請求頭新增token
    // if (store.state.UserToken) {
      config.headers.accessToken = '2332D4444594F45EE7E6370794CB4483';
    // }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 響應攔截器即異常處理
instance.interceptors.response.use(
  response => {
    return response.data
  },
  err => {
    if (err && err.response) {
    } else {
      err.message = '連線伺服器失敗'
    }
    return Promise.reject(err.response)
  }
)

http.get = function (url) {
  return new Promise((resolve, reject) => {
    instance
      .get(url)
      .then(response => {
        if (response.code === 1) {
          resolve(response.data)
        } else {
          reject(response.msg)
        }
      })
      .catch(e => {
        console.log(e)
      })
  })
}

http.post = function (url, data) {
  return new Promise((resolve, reject) => {
    instance
      .post(url, data)
      .then(response => {
        if (response.returnCode == '1' && response.result) {
          resolve(response.data)
        } else {
          Message.error(response.returnInfo);
          reject(response.returnInfo)
        }
      })
      .catch(e => {
        
      })
  })
}

export default http

3.api.js：

import axios from '@/config/httpConfig'

// 獲取報表首頁列表
export function getDataList(data) {
  return axios.post('/report/getReportList', data)
}

4.vue：

import {getFolder} from "./reportList/api";

async getFolders() {
  let data = await getFolder();
  this.allFolders = data;
},

如上封裝就可以了，在vue檔案中呼叫自己需要的介面方法，直接就可以獲取到資料了。

注意：

1.首先在main.js中引入，然後新增axios的封裝方法，新建api.js檔案，裡面包含頁面中用到的所有介面，最後在vue檔案中引入，通過async/await呼叫。

2.封裝axios主要是為了避免在所有頁面中請求介面時都需要寫很多重複的程式碼，將介面都寫在一個統一的api.js檔案中是為了使程式碼更加清楚簡潔。

3.是否需要封裝axios主要看自己，若是專案不需請求大量介面則不需要封裝，可以看上篇部落格沒有進行封裝的使用：https://www.cnblogs.com/5201314m/p/13411645.html