Vue.js API 接口调用完全指南：从封装到进阶实战

在 Vue.js 项目中，进行 API 接口调用的最佳实践通常是使用 **Axios** 库，并将其封装成一个单独的模块或服务。这样做的好处是：统一管理接口、便于配置拦截器（处理 Token、错误等）、易于维护。

下面我将从 基础安装、Axios 封装、API 模块化管理以及在组件中使用四个方面详细为你整合。

1. 基础准备

首先，确保你的项目中安装了 `axios`。

npm install axios
# 或者
yarn add axios

2. Axios 封装 (核心步骤)

我们通常在 `src` 目录下创建一个 `utils` 或 `request` 文件夹，然后创建 `request.js`（或 `http.js`）。这个文件负责创建 axios 实例并配置拦截器。

文件路径： `src/utils/request.js`

import axios from 'axios'

// 创建一个新的 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 从环境变量中获取接口基础地址
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如：从本地存储中获取 token 并添加到请求头
    const token = localStorage.getItem('token')
    if (token) {
      // 让每个请求携带自定义 token
      // 请根据实际情况自行修改，例如 'X-Token' 或 'Authorization'
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  /**
   * 如果你想获取 http 信息如 headers 或 status
   * 请 return response => response
   */
  response => {
    const res = response.data

    // 假设后端返回的 code 为 20000 或 200 表示成功
    // 这里根据你的实际后端接口约定进行修改
    if (res.code !== 200 && res.code !== 20000) {
      // 例如：Token 过期或未登录
      if (res.code === 401) {
        // 可以在这里跳转到登录页
        // router.push('/login')
        console.error('登录已过期，请重新登录')
      }

      // 其他错误码对应的提示
      console.error(res.message || 'Error')