vue中api统一管理

avatar
作者
猴君
阅读量:184

针对小型项目

无需管理的情况下

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

针对非小型项目

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>  

感谢原创:https://juejin.cn/post/7084149728799096840