vue.js Axios实现增删改查

Vue.js 和 Axios 是常用的前端框架和 HTTP 库组合，它们可以方便地处理前端与后端的数据交互。在 Vue 中，Axios 被广泛用于发起 RESTful 风格的 API 请求，实现增删改查操作。

1. **创建 Axios 实例**:
首先，在你的 Vue 组件中或全局范围内，你可以创建一个新的 Axios 实例，配置超时、默认头等信息：

import axios from 'axios';
const service = axios.create({
  baseURL: process.env.BASE_API, // API 的基础 URL
  timeout: 5000, // 请求超时时间
});

2. **CRUD 操作举例**:
- **添加（Create）**: 发送 POST 请求，向服务器提交数据：

     create(data) {
       return service.post('/api/users', data);
     }

- **读取（Read）**: 发送 GET 请求获取数据，通常用于获取单个用户或列表：

     getUser(id) {
       return service.get(`/api/users/${id}`);
     }
     getUsers() {
       return service.get('/api/users');
     }

- **更新（Update）**: 发送 PUT 或 PATCH 请求，修改指定资源的数据：

     updateUser(id, updatedData) {
       return service.put(`/api/users/${id}`, updatedData);
     }

- **删除（Delete）**: 发送 DELETE 请求，从服务器删除资源：

     deleteUser(id) {
       return service.delete(`/api/users/${id}`);
     }

3. **错误处理**:
Axios 会自动处理响应，提供 `.then` 和 `.catch` 来处理成功和失败的情况。例如：

   createUser(data).then(response => {
     console.log('Success:', response.data);
   }).catch(error => {
     console.error('Error:', error);
   });