Make writing a habit together! This is the 8th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.
Antecedents feed
When writing a small project normally, you may not care so much about the storage of the request interface. After all, throughout the whole project, there may be only a dozen or twenty interfaces. When problems occur, you can easily locate them. However, when the number of interfaces reaches 100 levels, there will be problems such as interface adjustment, and it will be a long time to find an API interface. And some interfaces may be used in a lot of places, if the interface happens better, good boy, just modify an interface address or parameters of what will take an hour or two, too affect efficiency and development mood. It is important to decouple API modules. Now the collection of API unified management of several schemes, each has its own strengths and weaknesses, the specific pros and cons are still waiting for you to discuss.
This is for vUE scaffolding projects, not projects that introduce VUE in HTML.
For small projects (no separate secondary encapsulation of AXIOS)
No management, direct work. The number of interfaces is limited to 20 to 30
The code:
<script>
import axios from 'axios';
export default {
methods: {
async request() {
let data = {}
try {
// host refers to the requested domain name, path refers to the requested path, and data refers to the relevant parameters and request header configuration
let res = await axios.post(`${host}${path}`, {
data
})
console.log(res)
} catch(err) {
this.$message.error(err.message)
}
}
}
}
</script>
Copy the codeUnified api.js file management
All API interface information is written in a JS file to maintain. The page interface request can be imported directly
- Create the API folder in the root directory, and then create index.js
export default {
getInfo: 'https://xxx.x.com/getinfo'
}
Copy the code- Specific page usage
<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>
Copy the codeFor non-small projects (secondary encapsulation with AXIos)
The problem about axios secondary encapsulation is not repeated here. If you don’t know, please contact me.
If the number of interfaces exceeds 50, it is not very friendly for maintenance or upgrade to request interfaces in the above way. At this time, we need a more convenient solution.
Unified API management + mount to vue instance + single module
In API unified management, not only manage the request address, but directly write a request method, by accepting some parameters to achieve variability.
- api/index.js
import request from '@/utils/axios'
export default {
getInfo(params) {
return request({
url: '/xxx/xxx/xxx'.method: 'post/get',
params, // If it is a get request
data: params // If it is a POST request}}})Copy the code- In the main. In 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')
Copy the code- You have to use it on the page
<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>
Copy the codeUnified API management + mount to vue instance + multiple modules
- Advantages: The interface can be invoked from anywhere
- Disadvantages: If the number of interfaces is large enough, too much data can be mounted to the VUE instance, which can cause performance problems
- api/modules/account.js
import account from '@/utils/axios'
export default {
getInfo(params) {
return request({
url: '/xxx/xxx/xxx'.method: 'post/get',
params, // If it is a get request
data: params // If it is a POST request}}})Copy the code- api/index.js
import account from './modules/account'
export default {
account
}
Copy the code- In the main. In 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')
Copy the code- Use on the page
<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>
Copy the codeUnified API management + VUEX + single module
Vue instance can be mounted on any page without any interface being called. Disadvantages: In order to ensure that no error is reported when the page is refreshed, it is necessary to write an interface configuration in the API module, and at the same time, it is also necessary to write once in the Store module, which is quite tedious.
- API /index.js is written the same way.
- Related mount code in main.js removed
- 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)
}
}
})
Copy the code- In the page
<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>
Copy the codeYou can also use 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>
Copy the codeUnified API management + VUEX + multiple modules
Advantages: Can be invoked from any position on the page Disadvantages: New delete Modify the same interface, need to maintain two files at the same time
- For API files, the schemas are independent of each other: API /account.js
import request from '@/utils/axios'
export default {
getInfo(params) {
return request({
url: '/xxx/xxx/xxx'.method: 'post/get',
params, // If it is a get request
data: params // If it is a POST request}}})Copy the code- store/modules/account.js
import api from '@/api/account';
export default {
namespaced: true.actions: {
getInfo(store, params) {
return api.getInfo(params)
}
}
}
Copy the code- 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
}
})
Copy the code- In the page
<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>
Copy the codeconclusion
- Each of these approaches has its own strengths and weaknesses.
- I do not know if there is a better way to dig friends, in the comments section, will be grateful…