接口请求

了解如何在项目中进行 API 接口请求。

Axios 封装

项目使用 Axios 进行 HTTP 请求，已在 src/utils/request.ts 中封装。

基本用法

import request from '@/utils/request'

// GET 请求
export function getUserList(params) {
  return request({
    url: '/api/v1/users',
    method: 'get',
    params
  })
}

// POST 请求
export function addUser(data) {
  return request({
    url: '/api/v1/users',
    method: 'post',
    data
  })
}

请求拦截器

自动添加 Token：

request.interceptors.request.use(
  (config) => {
    const token = getToken()
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  }
)

响应拦截器

统一处理响应：

request.interceptors.response.use(
  (response) => {
    const { code, data, msg } = response.data
    if (code === '00000') {
      return data
    } else {
      ElMessage.error(msg)
      return Promise.reject(new Error(msg))
    }
  }
)

API 管理

在 src/api 目录按模块管理：

api/
├── system/
│   ├── user-api.ts
│   ├── role-api.ts
│   └── menu-api.ts
└── ...

使用示例

<script setup lang="ts">
import UserAPI from '@/api/system/user-api'

const loading = ref(false)
const userList = ref([])

async function fetchUsers() {
  loading.value = true
  try {
    const data = await UserAPI.getUserList({ pageNum: 1 })
    userList.value = data.list
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchUsers()
})
</script>

相关链接

• 环境配置
• Mock 数据
• 接口文档