vue中关于api统一管理那点事

一起养成写作习惯!这是我参与「日新计划 4 月更文挑战」的第8天,点击查看活动详情。

前情提要

正常写小项目的时候,关于请求接口的存放可能没有那么在意,毕竟纵观整个项目可能也就那么十几二十个接口,当出现问题进行定位的时候也能很轻松的定位到。
但是当接口的数量达效率计算公式到百级的时候,出效率是什么意思现接口调整等的问题时就会出现捉襟见肘的情况,再多点可能改一个api接口就要找好久。而且有的接口可能好多地方用,如果这个接口发生更好,好家伙,光修改个接approve口地址或者参数什么的就得要一两个小时,太影响效率和开发心情。
此时将api模块解耦出来就显得尤为重要。现在收集到了api统一管理的几种方案,各有千秋,具体优劣还有待各位看官的探讨。

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

针对小项目而html文件怎么打开言(没有单独二次封装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文件里去维护。页面接口请求直approve接引入即可

  • 在根目录下创建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>

针对非小型项目而APP言(进行axios的二次封装)

关于axios二次封装的问题可以直接点击链接查阅,有小白不懂得可以联系我。

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

api统一管理 + 挂ios下载载到vue实例上 + 单模块

思路:在api统一管理时html简单网页代码,不仅仅approach效率高发票查验理请求地址,而是直接写一个request的请求方法,通过接受一些参数来html代码实现多变性。

  • 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请求的话
    })
  }
}
  • 在maiios下载n.APPjs里
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实例效率计算公式上 + 多模块

  • 优点:可以在任意位置调用接口
  • 缺点:如果接口数量足够大,挂appointment载到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.j效率计算公式s
import account from './modules/account'
export default {
  account
}
  • 在mios应用商店ain.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
优点:在html代码不挂载到vue实例的基础上可以在任何页面随意调用任何接口
缺点:为了保证在刷新页面不会报错的情况下就需要在api模块写一个接口配置,同时在store模块也需要写一次,https和http的区别比较繁琐。

  • 在api/index.html简单网页代码js的写法不变。
  • main.js中的相关挂载代ios应用商店码删ios16
  • 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)
    }
  }
})
  • 在页面中ios模拟器
<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>

ap效率英文翻译i统一管理 + 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/accohtml是什么意思unt.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
  }
})
  • 在页https协议面中
<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>

总结

  • 目前就这些方法,各有ios应用商店千秋。
  • 不知道各位掘友还有没有更好的方法,在评论区打出来,将html感激不尽…

发表评论

提供最优质的资源集合

立即查看 了解详情