当前位置：首页 > VUE

vue实现接口配置

2026-03-09 21:32:53VUE

配置Axios实例

在Vue项目中通常使用Axios进行HTTP请求。创建一个独立的axios.js文件配置基础实例：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 从环境变量读取
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

请求拦截器

添加统一的请求预处理逻辑，例如自动添加Token：

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

响应拦截器

处理响应数据和错误：

vue实现接口配置

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      return Promise.reject(new Error(res.message || 'Error'))
    }
    return res
  },
  error => {
    if (error.response.status === 401) {
      // 处理未授权情况
    }
    return Promise.reject(error)
  }
)

API模块化管理

创建api目录按功能模块组织接口：

// api/user.js
import request from '../utils/axios'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

环境变量配置

在项目根目录创建不同环境的配置文件：

vue实现接口配置

# .env.development
VUE_APP_API_BASE_URL=http://dev.api.example.com

全局错误处理

在main.js中注册全局错误处理器：

Vue.config.errorHandler = (err) => {
  if (err.message.includes('timeout')) {
    showToast('请求超时')
  }
}

接口Mock方案

开发阶段可使用Mock.js模拟数据：

import Mock from 'mockjs'
Mock.mock('/user/login', 'post', {
  code: 200,
  data: {
    token: '@guid'
  }
})

TypeScript支持

为接口定义类型声明：

interface ApiResponse<T> {
  code: number
  data: T
  message?: string
}

export function getUserInfo(): Promise<ApiResponse<User>> {
  return request.get('/user/info')
}