和服务端进行交互

前端请求流程

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

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

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

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

request.ts

其中，@/request/index.ts 是基于 axios (opens new window) 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request/index.ts (opens new window)。 它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

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

// api/article.ts
import request from '@/request'
import { AxiosResponse } from 'axios'
import { ResponseData } from '@/types/api/public'
import { TableList, EditData, UploadApi } from '@/types/api/table'
type ConfigType<T=ResponseData> = Promise<AxiosResponse<T>>
const baseUrl = '/admin/v1'

export const fetchList = (params: any) : ConfigType<TableList> => {
  return request({
    url: baseUrl + '/article/list',
    method: 'get',
    params
  })
}

// views/example/list
import { onMounted } from 'vue'
import { fetchList } from '@/api/article'
export default {
  setup: {
    const list = ref<any>()
    const listLoading = ref<boolean>(true)
    onMounted(() => {
      fetchData() {
        this.listLoading = true
        fetchList().then(response => {
          list.value = response.data.items
          listLoading.value = false
        })
      }
    })
  }
}

设置多个 baseURL

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

# .env.development
VITE_APP_BASE_API = '/dev-api' #注入本地 api 的根路径
VITE_APP_BASE_API2 = '/dev-api2' #注入本地 api2 的根路径

之后根据环境变量创建axios实例，让它具有不同的baseURL。 @/request/index.ts (opens new window)

// create an axios instance
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
})

const service2 = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API2, // api2 的 base_url
  timeout: 5000 // request timeout
})

或者

export const fetchList = (params: any) : ConfigType<TableList> => {
  return request({
    url: baseUrl + '/article/list',
    method: 'get',
    params,
    baseURL: 'xxxx' // 直接通过覆盖的方式
  })
}