关于vue中api统一管理的那些事_vue.js_

首页 / 新闻资讯 / 正文

前情提要

正常写小项目的时候，关于请求接口的存放可能没有那么在意，毕竟纵观整个项目可能也就那么十几二十个接口，当出现问题进行定位的时候也能很轻松的定位到。

但是当接口的数量达到百级的时候，出现接口调整等的问题时就会出现捉襟见肘的情况，再多点可能改一个api接口就要找好久。而且有的接口可能好多地方用，如果这个接口发生更好，好家伙，光修改个接口地址或者参数什么的就得要一两个小时，太影响效率和开发心情。

此时将api模块解耦出来就显得尤为重要。现在收集到了api统一管理的几种方案，各有千秋，具体优劣还有待各位看官的探讨。

针对的是vue脚手架项目，不是在html中引入vue的项目。

针对小项目而言（没有单独二次封装axios）

无需管理，直接干。仅限于接口数量在20-30的

上代码：

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

针对非小型项目而言（进行axios的二次封装）

关于axios二次封装的问题在这里就不做过得赘述了，有小白不懂得可以联系我。

对于接口数量超过50的来说，还是用上述的方式去请求接口，此时无论是对于维护还是升级而言都不是很友好，此时我们需要更便利的方案。

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>

总结

目前就这些方法，各有千秋。

上一个：Eureka详解系列(四)–Eureka Client部分的源码和配置

下一个：买一个宠物狗粮食（买一点普通的狗粮多少钱一斤）

热门文章

归纳