腳本之家服務器常用軟件

快捷導航

關于vue中api統(tǒng)一管理的那些事

更新時間：2022年04月11日 08:41:40 作者：知你故來風

最近在學習Vue教程,下面這篇文章主要給大家介紹了關于vue中api統(tǒng)一管理的那些事,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下

前情提要

正常寫小項目的時候，關于請求接口的存放可能沒有那么在意，畢竟縱觀整個項目可能也就那么十幾二十個接口，當出現(xiàn)問題進行定位的時候也能很輕松的定位到。

但是當接口的數(shù)量達到百級的時候，出現(xiàn)接口調(diào)整等的問題時就會出現(xiàn)捉襟見肘的情況，再多點可能改一個api接口就要找好久。而且有的接口可能好多地方用，如果這個接口發(fā)生更好，好家伙，光修改個接口地址或者參數(shù)什么的就得要一兩個小時，太影響效率和開發(fā)心情。

此時將api模塊解耦出來就顯得尤為重要。現(xiàn)在收集到了api統(tǒng)一管理的幾種方案，各有千秋，具體優(yōu)劣還有待各位看官的探討。

針對的是vue腳手架項目，不是在html中引入vue的項目。

針對小項目而言（沒有單獨二次封裝axios）

無需管理，直接干。僅限于接口數(shù)量在20-30的

上代碼：

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

統(tǒng)一api.js文件管理

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

在根目錄下創(chuàng)建api文件夾，然后創(chuàng)建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>

針對非小型項目而言（進行axios的二次封裝）

關于axios二次封裝的問題在這里就不做過得贅述了，有小白不懂得可以聯(lián)系我。

對于接口數(shù)量超過50的來說，還是用上述的方式去請求接口，此時無論是對于維護還是升級而言都不是很友好，此時我們需要更便利的方案。

api統(tǒng)一管理 + 掛載到vue實例上 + 單模塊

思路：在api統(tǒng)一管理時，不僅僅管理請求地址，而是直接寫一個request的請求方法，通過接受一些參數(shù)來實現(xiàn)多變性。

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統(tǒng)一管理 + 掛載到vue實例上 + 多模塊

優(yōu)點：可以在任意位置調(diào)用接口
缺點：如果接口數(shù)量足夠大，掛載到vue實例上得數(shù)據(jù)過多，可能會造成性能問題
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統(tǒng)一管理 + vuex + 單模塊

思路：api統(tǒng)一管理的方式不變，但是由掛載到vue實例上改成vuex 優(yōu)點：在不掛載到vue實例的基礎上可以在任何頁面隨意調(diào)用任何接口缺點：為了保證在刷新頁面不會報錯的情況下就需要在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統(tǒng)一管理 + vuex + 多模塊

優(yōu)點：可以在頁面的任何位置進行調(diào)用缺點：新增刪除修改同一個接口，需要同時維護兩個文件

對于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>