針對小型項目

無需管理的情況下

<script>
import axios from 'axios';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        // host指的是請求的域名，path指的是請求的路徑， data是相關的參數和請求頭配置
        let res = await axios.post(`${host}${path}`, {
          data
        })
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

統一api.js文件管理

將所有的api的接口信息都寫在一個js文件里去維護。頁面接口請求直接引入即可

在根目錄下創建api文件夾，然后創建index.js

export default {
  getInfo: 'https://xxx.x.com/getinfo'
}

具體頁面使用

<script>
import axios from 'axios';
import api from '@/api/index';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await axios.post(api.getInfo, {
          data
        })
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
      
    }
  }
}
</script>

針對非小型項目

api統一管理 + 掛載到vue實例上 + 單模塊

思路：在api統一管理時，不僅僅管理請求地址，而是直接寫一個request的請求方法，通過接受一些參數來實現多變性。
api/index.js

import request from '@/utils/axios'
export default {
  getInfo(params) {
    return request({
      url: '/xxx/xxx/xxx',
      method: 'post/get',
      params, // 如果是get請求的話
      data: params // 如果是post請求的話
    })
  }
}

在main.js里

import Vue from 'vue'
import App from './App.vue'
import api from '@/api/index';
Vue.prototype.$api = api;
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

頁面上得使用

<script>
import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/index';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$api.getInfo(data)
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

api統一管理 + 掛載到vue實例上 + 多模塊

優點：可以在任意位置調用接口
缺點：如果接口數量足夠大，掛載到vue實例上得數據過多，可能會造成性能問題
api/modules/account.js

import account from '@/utils/axios'
export default {
  getInfo(params) {
    return request({
      url: '/xxx/xxx/xxx',
      method: 'post/get',
      params, // 如果是get請求的話
      data: params // 如果是post請求的話
    })
  }
}

api/index.js

import account from './modules/account'
export default {
  account
}

在main.js里

import Vue from 'vue'
import App from './App.vue'
import api from '@/api/index';
Vue.prototype.$api = api;
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

頁面上的使用

<script>
import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/index';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$api.account.getInfo(data)
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

api統一管理 + vuex + 單模塊

思路：api統一管理的方式不變，但是由掛載到vue實例上改成vuex 優點：在不掛載到vue實例的基礎上可以在任何頁面隨意調用任何接口 缺點：為了保證在刷新頁面不會報錯的情況下就需要在api模塊寫一個接口配置，同時在store模塊也需要寫一次，比較繁瑣。
在api/index.js的寫法不變。
main.js中的相關掛載代碼刪除
store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import api from '@/api/index';
Vue.use(Vuex);
export default new Vuex.Store({
  action: {
    getInfo(store, params) {
      return api.getInfo(params)
    }
  }
})

在頁面中

<script>
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$store.dispatch('getInfo', data)
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

當然你也可以使用mapActions

<script>
import { mapActions } from 'vuex';
export default {
  methods: {
    ...mapActions([ 'getInfo' ])
    async request() {
      let data = {}
      try {
        let res = await this.getInfo(data)
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

api統一管理 + vuex + 多模塊

優點：可以在頁面的任何位置進行調用 缺點：新增刪除修改同一個接口，需要同時維護兩個文件
對于api文件而言，此時各個模式是相互獨立的：api/account.js

import request from '@/utils/axios'
export default {
  getInfo(params) {
    return request({
      url: '/xxx/xxx/xxx',
      method: 'post/get',
      params, // 如果是get請求的話
      data: params // 如果是post請求的話
    })
  }
}

store/modules/account.js

import api from '@/api/account';
export default {
    namespaced: true,
    actions: {
        getInfo(store, params) {
          return api.getInfo(params)
        }
    }
}

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import account from './modules/account';
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
      account
  }
})

在頁面中

<script>
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$store.dispatch('account/getInfo', data)
        console.log(res)
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

感謝原創：https://juejin.cn/post/7084149728799096840