vue.js实现restful
Vue.js 实现 RESTful API 交互
安装 Axios 库
Axios 是 Vue.js 中常用的 HTTP 客户端，用于发送 RESTful 请求。通过以下命令安装：
npm install axios配置 Axios 实例
在 src 目录下创建 api 文件夹，并新建 axios.js 文件，配置基础 URL 和请求拦截器：
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com', // 替换为实际 API 地址
timeout: 5000,
});
// 请求拦截器
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
},
error => Promise.reject(error)
);
// 响应拦截器
instance.interceptors.response.use(
response => response.data,
error => Promise.reject(error)
);
export default instance;封装 RESTful 请求方法
创建 API 服务模块
在 api 文件夹下新建 service.js，封装 CRUD 方法：
import request from './axios';
export default {
get(resource, params) {
return request.get(resource, { params });
},
post(resource, data) {
return request.post(resource, data);
},
put(resource, id, data) {
return request.put(`${resource}/${id}`, data);
},
delete(resource, id) {
return request.delete(`${resource}/${id}`);
},
};在 Vue 组件中使用
调用 API 示例
在组件中导入服务模块并调用对应方法：
import api from '@/api/service';
export default {
methods: {
async fetchUsers() {
try {
const users = await api.get('/users');
console.log(users);
} catch (error) {
console.error(error);
}
},
async createUser(userData) {
try {
const response = await api.post('/users', userData);
console.log(response);
} catch (error) {
console.error(error);
}
},
},
};处理跨域问题
开发环境代理配置
在 vue.config.js 中配置代理解决跨域：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},
},
};错误处理与反馈
全局错误处理
在 main.js 中统一捕获未处理的 Promise 错误：
import Vue from 'vue';
Vue.config.errorHandler = (err, vm, info) => {
console.error('全局错误:', err);
// 可调用 Toast 或 Message 组件显示错误
};
