vue中使用axios封装restful api风格四种请求

二次封装Axios是为了在Vue项目中更好地管理和处理HTTP请求，同时可以在封装中加入一些通用的功能，如拦截器、错误处理等。下面将使用axios来封装一个符合 RESTful API 风格的四种请求，如GET、POST、PUT、DELETE等。以下是封装示例：

1、封装代码

//http.js
import axios from 'axios';
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});
// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送前可以做一些操作，比如添加请求头等
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

// 封装 RESTful 风格的 API
export const api = {
  // 获取资源列表
  getList(resource) {
    return instance.get(`/${resource}`);
  },
  
  // 获取单个资源
  getDetail(resource, id) {
    return instance.get(`/${resource}/${id}`);
  },
  
  // 创建资源
  create(resource, data) {
    return instance.post(`/${resource}`, data);
  },
  
  // 更新资源
  update(resource, id, data) {
    return instance.put(`/${resource}/${id}`, data);
  },
  
  // 删除资源
  delete(resource, id) {
    return instance.delete(`/${resource}/${id}`);
  }
};

2 在Vue中使用以上api对象的几种方法。

import { api } from './api'; // 根据你的文件路径进行调整
export default {
  methods: {
    fetchData() {
        api.getList('data').then(response => {
          // 处理响应数据
        }).catch(error => {
          // 处理错误
        });
    },
    createData() {
        const postData = { /* 数据对象 */ };
        api.create('data', postData).then(response => {
          // 处理响应数据
        }).catch(error => {
          // 处理错误
        });
    },
    updateData(id) {
        const updatedData = { /* 更新的数据对象 */ };
        api.update('data', id, updatedData).then(response => {
          // 处理响应数据
        }).catch(error => {
          // 处理错误
        });
    },
    deleteData(id) {
        api.delete('data', id).then(response => {
          // 处理响应数据
        }).catch(error => {
          // 处理错误
        });
    }
  }
}

二次封装xaios的好处就是在不同的组件中使用统一的API方法。依据RESTful API的设计理念来封装xaios，可以使代码更加清晰和易于维护。