Things about the unified management of API in Vue

Introduction

When writing small projects normally, you may not care so much about the storage of requested interfaces. After all, looking at the entire project, there may be only a dozen or twenty interfaces, and when problems arise, you can easily locate them.

However, when the number of interfaces reaches a level 100, problems such as interface adjustment will occur, and it will be difficult to change an API interface. Moreover, some interfaces may be used in many places. If this interface happens better, it will take one or two hours to modify the interface address or parameters, which will affect the efficiency and development mood too much.

It is particularly important to decouple the API module at this time. Now we have collected several solutions for API unified management, each with its own advantages and disadvantages. The specific advantages and disadvantages are still to be discussed by the readers.

It is aimed at vue scaffolding projects, not projects that introduce vue in html.

For small projects (no separate secondary encapsulation of axios)

No management required, just do it. Only for interfaces with 20-30

On code:

&lt;script&gt;
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, data is the relevant parameters and request header configuration        let res = await (`${host}${path}`, {
          data
        })
        (res)
      } catch(err) {
        this.$()
      }
    }
  }
}
&lt;/script&gt;

Unified file management

Write all API interface information in a js file for maintenance. The page interface request can be directly introduced

Create the API folder in the root directory and then create

export default {
  getInfo: '/getinfo'
}

Use specific pages

<script>
import axios from 'axios';
import api from '@/api/index';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await (, {
          data
        })
        (res)
      } catch(err) {
        this.$()
      }
      
    }
  }
}
</script>

For non-small projects (depending secondary packaging of axios)

I won’t go into details about the issue of axios secondary packaging here. If you don’t know, please contact me.

For those with more than 50 interfaces, the interface is still requested in the above method. At this time, it is not very friendly for maintenance or upgrades. At this time, we need a more convenient solution.

Api unified management + Mounting to vue instance + single module

Idea: When API is managed uniformly, it not only manages the request address, but directly writes a request method to achieve variability by accepting some parameters.

api/

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

import Vue from 'vue'
import App from './'
import api from '@/api/index';
.$api = api;
 = false
new Vue({
  render: h => h(App),
}).$mount('#app')

Used on the page

<script>
import HelloWorld from './components/'
import api from '@/api/index';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$(data)
        (res)
      } catch(err) {
        this.$()
      }
    }
  }
}
</script>

Api unified management + Mounting to vue instance + Multi-module

Advantages: The interface can be called anywhere
Disadvantages: If the number of interfaces is large enough and too much data is mounted on the vue instance, it may cause performance problems.
api/modules/

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

api/

import account from './modules/account'
export default {
  account
}

import Vue from 'vue'
import App from './'
import api from '@/api/index';
.$api = api;
 = false
new Vue({
  render: h => h(App),
}).$mount('#app')

Use on the page

<script>
import HelloWorld from './components/'
import api from '@/api/index';
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$(data)
        (res)
      } catch(err) {
        this.$()
      }
    }
  }
}
</script>

Api unified management + vuex + single module

Idea: The method of unified management of API remains unchanged, but it is changed from mounting to vuex to mount to vuex on a vue instance. Advantages: You can call any interface at will on any page without mounting to a vue instance. Disadvantages: In order to ensure that there will be no errors in refreshing the page, you need to write an interface configuration in the API module, and at the same time, you need to write it once in the store module, which is quite cumbersome.

The writing method in API/ remains unchanged.
Delete the relevant mount code in
store/

import Vue from 'vue';
import Vuex from 'vuex';
import api from '@/api/index';
(Vuex);
export default new ({
  action: {
    getInfo(store, params) {
      return (params)
    }
  }
})

In the page

<script>
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$('getInfo', data)
        (res)
      } catch(err) {
        this.$()
      }
    }
  }
}
</script>

Of course you can also use mapActions

<script>
import { mapActions } from 'vuex';
export default {
  methods: {
    ...mapActions([ 'getInfo' ])
    async request() {
      let data = {}
      try {
        let res = await (data)
        (res)
      } catch(err) {
        this.$()
      }
    }
  }
}
</script>

Api unified management + vuex + multi-module

Advantages: Can be called anywhere on the page Disadvantages: Added and deleted to modify the same interface, and requires two files to be maintained at the same time.

For the API file, the patterns are independent of each other at this time: api/

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

store/modules/

import api from '@/api/account';
export default {
    namespaced: true,
    actions: {
        getInfo(store, params) {
          return (params)
        }
    }
}

store/

import Vue from 'vue';
import Vuex from 'vuex';
import account from './modules/account';
(Vuex);
export default new ({
  modules: {
      account
  }
})

In the page

<script>
export default {
  methods: {
    async request() {
      let data = {}
      try {
        let res = await this.$('account/getInfo', data)
        (res)
      } catch(err) {
        this.$()
      }
    }
  }
}
</script>

Summarize

At present, these methods have their own advantages.

This is the end of this article about the unified management of API in Vue. For more related content on Vue API, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!