针对小型项目
无需管理的环境下
<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 = falsenew 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 = falsenew 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 |
