和服务端进行交互

前端请求流程

在 vue-element-admin 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

  1. UI 组件交互操作；
  2. 调用统一管理的 api service 请求函数；
  3. 使用封装的 request.js 发送请求；
  4. 获取服务端返回；
  5. 更新 data；

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 @/api 文件夹中，并且一般按照 model 纬度进行拆分文件，如：

  1. api/
  2.   login.js
  3.   article.js
  4.   remoteSearch.js
  5.   ...

request.js

其中，@/utils/request.js 是基于 axios和服务端进行交互 - 图1 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js和服务端进行交互 - 图2。 它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

一个请求文章列表页的例子：

  1. // api/article.js
  2. import request from '../utils/request';
  3. export function fetchList(query) {
  4.   return request({
  5.     url: '/article/list',
  6.     method: 'get',
  7.     params: query
  8.   })
  9. }
  12. // views/example/list
  13. import { fetchList } from '@/api/article'
  14. export default {
  15.   data() {
  16.     list: null,
  17.     listLoading: true
  18.   },
  19.   methods: {
  20.     fetchData() {
  21.       this.listLoading = true
  22.       fetchList().then(response => {
  23.         this.list = response.data.items
  24.         this.listLoading = false
  25.       })
  26.     }
  27.   }
  28. }

设置多个 baseURL

我们可以通过环境变量设置多个baseURL，从而请求不同的 api 地址。

  1. # .env.development
  2. VUE_APP_BASE_API = '/dev-api' #注入本地 api 的根路径
  3. VUE_APP_BASE_API2 = '/dev-api2' #注入本地 api2 的根路径

之后根据环境变量创建axios实例，让它具有不同的baseURL。 @/utils/request.js和服务端进行交互 - 图3

  1. // create an axios instance
  2. const service = axios.create({
  3.   baseURL: process.env.BASE_API, // api 的 base_url
  4.   timeout: 5000 // request timeout
  5. })
  7. const service2 = axios.create({
  8.   baseURL: process.env.BASE_API2, // api2 的 base_url
  9.   timeout: 5000 // request timeout
  10. })

或者

  1. export function fetchList(query) {
  2.   return request({
  3.     url: '/article/list',
  4.     method: 'get',
  5.     params: query,
  6.     baseURL: 'xxxx' // 直接通过覆盖的方式
  7.   })
  8. }

从 mock 直接切换到服务端请求

见 Mock 和联调