针对小型项目
无需管理的情况下
<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>
