vue实现接口配置
Vue 中实现接口配置的方法
在 Vue 项目中配置接口通常涉及以下几个关键步骤：
创建 API 配置文件
在 src 目录下新建 api 文件夹，创建 index.js 文件作为接口配置文件。使用 axios 作为 HTTP 客户端：
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://your-api-domain.com/api',
timeout: 10000
})封装请求方法
在 api/index.js 中封装通用请求方法：
export const get = (url, params) => {
return instance.get(url, { params })
}
export const post = (url, data) => {
return instance.post(url, data)
}模块化接口管理
为不同功能模块创建单独的接口文件，例如 user.js：
import { get, post } from './index'
export const login = (credentials) => {
return post('/user/login', credentials)
}
export const getUserInfo = (userId) => {
return get(`/user/${userId}`)
}全局配置拦截器
在 main.js 或单独配置文件中添加请求/响应拦截器：
instance.interceptors.request.use(config => {
config.headers.Authorization = localStorage.getItem('token')
return config
})
instance.interceptors.response.use(
response => response.data,
error => {
console.error('API Error:', error)
return Promise.reject(error)
}
)环境变量配置
在项目根目录创建 .env.development 和 .env.production 文件：
VUE_APP_API_BASE_URL=https://dev-api.example.com在 api/index.js 中使用环境变量：
baseURL: process.env.VUE_APP_API_BASE_URL使用接口示例
在 Vue 组件中调用接口：
import { login } from '@/api/user'
export default {
methods: {
async handleLogin() {
try {
const res = await login(this.form)
console.log('Login success:', res)
} catch (error) {
console.error('Login failed:', error)
}
}
}
}接口 Mock 方案
开发阶段可使用 mockjs 创建模拟接口：
import Mock from 'mockjs'
Mock.mock('/api/user/login', 'post', {
code: 200,
data: {
token: '@guid',
username: '@name'
}
})TypeScript 支持（可选）
为接口添加类型定义：
interface User {
id: number
name: string
}
export const getUserInfo = (userId: number): Promise<User> => {
return get(`/user/${userId}`)
}通过以上配置可以实现 Vue 项目的接口统一管理，便于维护和扩展。实际项目中可根据需求调整封装层级和功能模块划分。
