Acerca de la gestión unificada de api en vue

¡Acostúmbrate a escribir juntos! Este es el octavo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

Resumen

        Al escribir normalmente 小项目, es posible que no le importe tanto el almacenamiento de la interfaz de solicitud. Después de todo, puede haber solo una docena o veinte interfaces en todo el proyecto. Cuando hay un problema, se puede localizar fácilmente.
        Sin embargo, cuando la cantidad de interfaces alcance los 100 niveles, se producirán problemas como el ajuste de la interfaz . Si hay 捉襟见肘más puntos, puede llevar mucho tiempo encontrar una interfaz API. Además, algunas interfaces pueden usarse en muchos lugares. Si esta interfaz es mejor, querida, tomará una o dos horas modificar la dirección o los parámetros de la interfaz, lo que afectará la eficiencia y el estado de ánimo del desarrollo.
        Aquí 将api模块解耦出来es donde cobra especial importancia. Ahora hemos recopilado varias soluciones para la administración unificada de API, cada una con sus propios méritos, y los funcionarios aún deben discutir las ventajas y desventajas específicas.

Está dirigido al proyecto de scaffolding de vue, no al proyecto que introduce vue en html.

Para proyectos pequeños (no hay un paquete secundario separado axios)

No hay necesidad de administrar, solo hazlo directamente. Limitado a 20-30 puertos

Código anterior:

<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>
复制代码

Gestión unificada de archivos api.js

Escriba toda la información de la interfaz API en un archivo js para mantenimiento. La solicitud de interfaz de página se puede importar directamente

• Cree la carpeta api en el directorio raíz, luego cree index.js

export default {
  getInfo: 'https://xxx.x.com/getinfo'
}
复制代码

• uso específico de la página

<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>
复制代码

Para proyectos no pequeños (encapsulación secundaria de axios)

No entraré en detalles sobre la encapsulación secundaria de axios aquí, cualquiera que no entienda puede contactarme.

Para aquellos con más de 50 interfaces, el método anterior todavía se usa para solicitar la interfaz. En este momento, no es muy fácil de mantener o actualizar. En este momento, necesitamos una solución más conveniente.

gestión unificada api + montaje en instancia vue + módulo único

Ideas: en la administración unificada de api, no solo administre la dirección de solicitud, sino que escriba directamente un método de solicitud de solicitud y realice la variabilidad al aceptar algunos parámetros.

• 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请求的话
    })
  }
}
复制代码

• en 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')
复制代码

• usado en la pagina

<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>
复制代码

gestión unificada api + montaje en instancia vue + módulos múltiples

• Ventaja: la interfaz se puede llamar desde cualquier lugar
• Desventaja: si la cantidad de interfaces es lo suficientemente grande, se adjuntan demasiados datos a la instancia de vue, lo que puede causar problemas de rendimiento
• api/módulos/cuenta.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
}
复制代码

• en 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')
复制代码

• Usar en la página

<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>
复制代码

gestión unificada api + vuex + módulo único

Idea: El método de administración unificado de api permanece sin cambios, pero se cambia a vuex de estar montado en la instancia de vue.Ventajas: Puede llamar a cualquier interfaz a voluntad en cualquier página sin estar montado en la instancia de vue.Desventajas: Para asegúrese de que la página no se actualice En caso de error, debe escribir una configuración de interfaz en el módulo api, y también debe escribirla una vez en el módulo de la tienda, lo cual es engorroso.

• La escritura en api/index.js permanece sin cambios.
• Eliminación de código de montaje relevante en main.js
• tienda/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)
    }
  }
})
复制代码

• en la pagina

<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>
复制代码

Por supuesto, también puedes usarmapActions

<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 gestión unificada + vuex + múltiples módulos

Ventajas: se puede llamar en cualquier parte de la página. Desventaja: agregar, eliminar y modificar la misma interfaz requiere que se mantengan dos archivos al mismo tiempo.

• Para el archivo api, cada modo es independiente entre sí en este momento: 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请求的话
    })
  }
}
复制代码

• tienda/módulos/cuenta.js

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

• tienda/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
  }
})
复制代码

• en la pagina

<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>
复制代码

Resumir

• En la actualidad, estos métodos tienen sus propios méritos.
• No sé si hay una mejor manera para que encuentres una mejor manera, escríbelo en el área de comentarios, te lo agradeceré...