vue调用后台接口实现
使用 Vue 调用后台接口的实现方法
安装 Axios
Axios 是一个基于 Promise 的 HTTP 客户端，用于发送异步请求。在 Vue 项目中安装 Axios：
npm install axios创建 API 服务层
在 src 目录下创建 api 文件夹，并新建一个 api.js 文件，用于封装接口请求：
import axios from 'axios';
const api = axios.create({
baseURL: 'http://your-backend-api.com', // 替换为实际的后端接口地址
timeout: 5000, // 请求超时时间
});
// 请求拦截器
api.interceptors.request.use(
config => {
// 在请求发送前处理，例如添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
api.interceptors.response.use(
response => {
return response.data;
},
error => {
return Promise.reject(error);
}
);
export default api;在组件中调用接口
在 Vue 组件中引入封装好的 api 服务，并调用接口：
import api from '@/api/api';
export default {
data() {
return {
posts: [],
loading: false,
};
},
methods: {
async fetchPosts() {
this.loading = true;
try {
const response = await api.get('/posts'); // 调用 GET 接口
this.posts = response;
} catch (error) {
console.error('Error fetching posts:', error);
} finally {
this.loading = false;
}
},
async createPost(postData) {
try {
const response = await api.post('/posts', postData); // 调用 POST 接口
console.log('Post created:', response);
} catch (error) {
console.error('Error creating post:', error);
}
},
},
mounted() {
this.fetchPosts(); // 组件挂载时调用接口
},
};处理跨域问题
如果前端和后端不在同一个域名下，可能会遇到跨域问题。可以在后端配置 CORS，或在前端开发环境中配置代理：
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://your-backend-api.com', // 后端接口地址
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
};错误处理
在接口调用时，建议统一处理错误，例如显示错误提示：
methods: {
async fetchPosts() {
try {
const response = await api.get('/posts');
this.posts = response;
} catch (error) {
this.$message.error('加载数据失败，请稍后重试');
}
},
},使用环境变量
将接口地址等配置信息放入环境变量中，便于区分开发和生产环境：
# .env.development
VUE_APP_API_URL=http://localhost:3000
# .env.production
VUE_APP_API_URL=http://your-production-api.com在代码中通过 process.env.VUE_APP_API_URL 获取环境变量值。
