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

更新時(shí)間：2022年04月11日 08:41:40 作者：知你故來風(fēng)

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

前情提要

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

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

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

針對(duì)的是vue腳手架項(xiàng)目，不是在html中引入vue的項(xiàng)目。

針對(duì)小項(xiàng)目而言（沒有單獨(dú)二次封裝axios）

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

上代碼：

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

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

將所有的api的接口信息都寫在一個(gè)js文件里去維護(hù)。頁面接口請(qǐng)求直接引入即可

在根目錄下創(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>

針對(duì)非小型項(xiàng)目而言（進(jìn)行axios的二次封裝）

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

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

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

思路：在api統(tǒng)一管理時(shí)，不僅僅管理請(qǐng)求地址，而是直接寫一個(gè)request的請(qǐng)求方法，通過接受一些參數(shù)來實(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請(qǐng)求的話
      data: params // 如果是post請(qǐng)求的話
    })
  }
}

在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實(shí)例上 + 多模塊

優(yōu)點(diǎn)：可以在任意位置調(diào)用接口
缺點(diǎn)：如果接口數(shù)量足夠大，掛載到vue實(shí)例上得數(shù)據(jù)過多，可能會(huì)造成性能問題
api/modules/account.js

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

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實(shí)例上改成vuex 優(yōu)點(diǎn)：在不掛載到vue實(shí)例的基礎(chǔ)上可以在任何頁面隨意調(diào)用任何接口缺點(diǎn)：為了保證在刷新頁面不會(huì)報(bào)錯(cuò)的情況下就需要在api模塊寫一個(gè)接口配置，同時(shí)在store模塊也需要寫一次，比較繁瑣。

在api/index.js的寫法不變。
main.js中的相關(guān)掛載代碼刪除
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>

當(dāng)然你也可以使用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ǎn)：可以在頁面的任何位置進(jìn)行調(diào)用缺點(diǎn)：新增刪除修改同一個(gè)接口，需要同時(shí)維護(hù)兩個(gè)文件

對(duì)于api文件而言，此時(shí)各個(gè)模式是相互獨(dú)立的：api/account.js

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

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>