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

更新时间：2022年04月11日 08:41:40 作者：知你故来风

最近在学习Vue教程,下面这篇文章主要给大家介绍了关于vue中api统一管理的那些事,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下

前情提要

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

但是当接口的数量达到百级的时候，出现接口调整等的问题时就会出现捉襟见肘的情况，再多点可能改一个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>

总结

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

到此这篇关于vue中api统一管理的文章就介绍到这了,更多相关vue api统一管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中node_modules中第三方模块的修改使用详解
这篇文章主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
nuxt 每个页面head标签内容设置方式
这篇文章主要介绍了nuxt 每个页面head标签内容设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue组合式API浅显入门示例详解
这篇文章主要为大家介绍了vue组合式API浅显入门示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
vue组件实现文字居中对齐的方法
这篇文章主要为大家详细介绍了vue组件实现文字居中对齐的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
webpack项目中使用vite加速的兼容模式详解
这篇文章主要为大家介绍了webpack项目中使用vite加速的兼容模式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue组件的写法汇总
组件化是为了方便代码复用，提高开发效率。今天脚本之家小编给大家分享常见的vue组件写法四种，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-04-04
vue中使用echarts以及简单关系图的点击事件方式
这篇文章主要介绍了vue中使用echarts以及简单关系图的点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue h5移动端禁止缩放代码
今天小编就为大家分享一篇vue h5移动端禁止缩放代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue+better-scroll 实现通讯录字母索引的示例代码
通讯录字母索引是常用的一种功能，本文主要介绍了Vue+better-scroll 实现通讯录字母索引，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Vuex中getters和actions的使用补充说明
这篇文章主要介绍了在Vuex中关于getters和actions使用的补充作了简要说明，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2021-09-09