vue中api統(tǒng)一管理

針對小型項目

無需管理的情況下

<script>
import axios from 'axios';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        // host指的是請求的域名盏求，path指的是請求的路徑， data是相關(guān)的參數(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文件里去維護(hù)宵喂。頁面接口請求直接引入即可

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

針對非小型項目

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實例的基礎(chǔ)上可以在任何頁面隨意調(diào)用任何接口缺點：為了保證在刷新頁面不會報錯的情況下就需要在api模塊寫一個接口配置德绿，同時在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)點：可以在頁面的任何位置進(jìn)行調(diào)用缺點：新增刪除修改同一個接口蕴纳，需要同時維護(hù)兩個文件
對于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
  }
})