vue中接口的实现
Vue 中接口的实现方式
在 Vue 中实现接口调用通常涉及与后端 API 的交互，以下是常见的实现方法：
使用 Axios 发送 HTTP 请求
安装 Axios 并封装请求：
npm install axios创建 src/api/request.js 封装基础配置：
import axios from 'axios'
const service = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
})
service.interceptors.request.use(config => {
config.headers['Authorization'] = localStorage.getItem('token')
return config
})
export default service定义具体接口模块 src/api/user.js：
import request from './request'
export const login = (data) => {
return request({
url: '/user/login',
method: 'post',
data
})
}使用 Vue 组件调用接口
在组件中调用封装好的接口：
import { login } from '@/api/user'
export default {
methods: {
async handleLogin() {
try {
const res = await login({
username: 'admin',
password: '123456'
})
console.log(res.data)
} catch (error) {
console.error(error)
}
}
}
}使用 Vuex 管理接口状态
创建 store 模块 store/modules/user.js：
import { login } from '@/api/user'
const actions = {
async login({ commit }, userInfo) {
const res = await login(userInfo)
commit('SET_TOKEN', res.data.token)
return res
}
}
const mutations = {
SET_TOKEN(state, token) {
state.token = token
localStorage.setItem('token', token)
}
}
export default {
namespaced: true,
actions,
mutations
}使用 Composition API 调用接口
在 setup 语法中使用：
import { ref } from 'vue'
import { login } from '@/api/user'
export default {
setup() {
const user = ref(null)
const handleLogin = async () => {
user.value = await login({
username: 'admin',
password: '123456'
})
}
return { user, handleLogin }
}
}接口 Mock 方案
开发阶段可使用 Mock.js 模拟数据：
import Mock from 'mockjs'
Mock.mock('/user/login', 'post', {
code: 200,
data: {
token: '@guid',
username: '@name'
}
})注意事项
- 统一错误处理应在请求拦截器中实现
- 敏感接口需要添加 CSRF 防护
- 生产环境应启用 HTTPS
- 分页接口建议使用统一参数格式
- 文件上传需设置
Content-Type: multipart/form-data
以上方案可根据项目需求组合使用，大型项目建议采用分层架构，将接口调用、状态管理和组件逻辑分离。
