先給出目錄結構

在對axios進行封裝前，引入了qs包對data進行處理，因為axios預設post請求時content-type為application/json，而後臺需要接收的資料格式為application/x-www-form-urlencoded，這個具體是否修改看你們後臺接收資料的方式。
在http.js檔案中程式碼如下

import axios from 'axios'
// qs 是對 post 請求 data 進行處理，不然後臺接收不了資料
// 因為axios post請求預設Content-type是 application/json
import qs from 'qs'
axios.defaults.timeout = 5000 // 5s沒響應則認為該請求失敗
axios.defaults.baseURL = '後臺給出的baseURL'
axios.defaults.withCredentials = true	// 跨域時如果要帶上cookie話則需要設定withCrendentials

// http request 攔截器 所有請求發出前都需要執行以下程式碼
axios.interceptors.request.use(
  request => {
    request.data = qs.stringify(request.data) //這裡就用qs對data就行處理
    request.headers = {
      'Content-Type': 'application/x-www-form-urlencoded' //設定header覆蓋content-type
    }
    return request
  },
  error => {
    return Promise.reject(error)
  }
)

/**
 *  封裝get方法 跟 post 方法
 *  @param url
 *  @param params
 *  @returns {Promise}
 */
 
// 這種寫法是匯出後可以通過在main.js中使用Vue.use(http) 掛載到vue例項上
export default {
  install: (Vue) => {
    Vue.prototype.$get = (url, params = {}) => {
      return new Promise((resolve, reject) => {
        axios.get(url, {params})
          .then(response => resolve(response.data))
          .catch(error => reject(error))
      })
    }
    Vue.prototype.$post = (url, params = {}) => {
      return new Promise((resolve, reject) => {
        axios.post(url, params)
          .then(response => resolve(response.data))
          .catch(error => reject(error))
      })
    }
  }
}

 

在main.js檔案下：

import Http from './utils/http'
Vue.use(Http)

那麼在整個專案的任何地方都可以使用this.$get / this.$post 發請求了！