vue+怎么实现api
在Vue中调用API的方法
Vue中通常使用axios或fetch等工具与后端API交互。以下是具体实现方式：
安装axios
通过npm或yarn安装axios依赖：
npm install axios
# 或
yarn add axios封装API请求
在src目录下创建api文件夹，新建request.js文件封装基础请求：
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://your-api-domain.com/api',
timeout: 5000
})
// 请求拦截器
instance.interceptors.request.use(config => {
config.headers.Authorization = localStorage.getItem('token')
return config
})
// 响应拦截器
instance.interceptors.response.use(
response => response.data,
error => Promise.reject(error)
)
export default instance编写具体API模块
在api文件夹中创建模块文件（如userApi.js）：
import request from './request'
export const login = (data) => {
return request({
url: '/user/login',
method: 'POST',
data
})
}
export const getUserInfo = (id) => {
return request({
url: `/user/${id}`,
method: 'GET'
})
}在组件中调用API
在Vue组件中引入并调用API：
import { login, getUserInfo } from '@/api/userApi'
export default {
methods: {
async handleLogin() {
try {
const res = await login({ username: 'admin', password: '123456' })
console.log(res)
} catch (error) {
console.error(error)
}
}
},
async created() {
const userInfo = await getUserInfo(1)
console.log(userInfo)
}
}使用环境变量
在项目根目录创建.env文件管理不同环境API地址：
VUE_APP_API_URL=https://your-api-domain.com/api修改request.js中的baseURL：
baseURL: process.env.VUE_APP_API_URL可选优化方案
- 使用async/await处理异步请求更清晰
- 添加TypeScript支持增强类型提示
- 统一错误处理在拦截器中处理通用错误
- API Mock：开发阶段使用Mock.js模拟数据
注意事项
- 跨域问题需后端配置CORS或前端配置代理
- 生产环境应启用HTTPS
- 敏感操作需添加CSRF防护
- 重要API请求需要添加权限验证
