# Trabajar con el Servidor

# Flujo de solicitudes de front-end

En vue-element-admin, una interfaz de usuario completa interactúa con el flujo de procesamiento del lado del servidor de la siguiente manera:

1. Interacción de componentes UI;
2. Llamar a la función de solicitud de servicio API de gestión unificada;
3. Enviar solicitudes utilizando request.js;
4. Obtener respuesta del servidor;
5. Actualizar datos;

Como puedes ver en el flujo anterior, para facilitar la administración y el mantenimiento, el procesamiento de solicitudes unificadas se coloca en la carpeta src/api y los archivos generalmente se dividen de acuerdo con la latitud del modelo, como:

api/
  login.js
  article.js
  remoteSearch.js
  ...

# request.js

@/utils/request.js se basa en axios, para facilitar el manejo uniforme de POST, GET y otros parámetros de solicitud, encabezados de solicitud y mensajes de error. Para ver mas específico vea request.js.

Encapsula el 'interceptor de solicitud' global, el 'interceptor de respuesta', el 'manejo unificado de errores', el 'tiempo de espera unificado, la configuración de baseURL, etc.'

# Un ejemplo de solicitud de una lista de artículos:

// api/article.js
import request from '../utils/request';
export function fetchList(query) {
  return request({
    url: '/article/list',
    method: 'get',
    params: query
  })
}

// views/example/list
import { fetchList } from '@/api/article'
export default {
  data() {
    list: null,
    listLoading: true
  },
  methods: {
    fetchData() {
      this.listLoading = true
      fetchList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}

# Establecer múltiples baseURLs

Podemos solicitar múltiples direcciones api configurando múltiples baseURLs a través de variables de entorno.

# .env.development
VUE_APP_BASE_API = '/dev-api' #Inyecta la ruta raíz de la api
VUE_APP_BASE_API2 = '/dev-api2' #Inyecta la ruta raíz de la api

Luego crea una instancia axios basada en la variable de entorno, dándole una baseURL @/utils/request.js diferente.

// crear una instancia de axios
const service = axios.create({
  baseURL: process.env.BASE_API, // api base_url
  timeout: 5000 //  tiempo de espera agotado
})

const service2 = axios.create({
  baseURL: process.env.BASE_API2, // api base_url
  timeout: 5000 // tiempo de espera agotado
})

O

export function fetchList(query) {
  return request({
    url: '/article/list',
    method: 'get',
    params: query,
    baseURL: 'xxxx' // cobertura directa
  })
}

# Cambiar de Mock directamente a la solicitud del servidor

Ver Mock Data