# Work with Server

# Front-end request flow

In vue-element-admin , a complete front-end UI interacts to the server-side processing flow as follows:

1. UI component interaction;
2. Call unified management API service request function;
3. Send requests using encapsulated request.js;
4. Get server return;
5. Update data;

As you can see from the above flow, in order to facilitate management and maintenance, unified request processing is placed in the src/api folder and the files are generally split according to the model latitude,such as:

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

# request.js

@/src/utils/request.js is based on the axios, to facilitate the uniform handling of POST, GET and other request parameters, request headers, and error messages。Specific can see request.js.

It encapsulates the global request interceptor, response interceptor,unified error handling, unified timeout, baseURL settings, etc.

# An example of a request article list:

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

# Set multiple baseURLs

We can request multiple api addresses by setting multiple baseURLs through environment variables.

# .env.development
VUE_APP_BASE_API = '/dev-api' #Inject the root path of the api
VUE_APP_BASE_API2 = '/dev-api2' #Inject the root path of the api

Then create an axios instance based on the environment variable, giving it a different baseURL @/utils/request.js

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api base_url
  timeout: 5000 // request timeout
})

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

Or

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

# Switch from mock directly to server request

See Mock Data