vue实现rest风格

Vue 实现 REST 风格

在 Vue 中实现 REST 风格通常涉及与后端 RESTful API 的交互，包括数据的增删改查（CRUD）操作。以下是具体实现方法：

安装 Axios

Axios 是 Vue 中常用的 HTTP 客户端，用于发送 RESTful 请求。

npm install axios

配置 Axios 实例

创建一个单独的配置文件（如 http.js）来设置 Axios 实例，便于统一管理请求和响应。

import axios from 'axios';

const http = axios.create({
  baseURL: 'https://api.example.com', // 替换为后端 API 地址
  timeout: 5000,
});

// 请求拦截器
http.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

export default http;

实现 RESTful 操作

在 Vue 组件中调用 Axios 实例，完成 RESTful 风格的 CRUD 操作。

GET 请求（查询数据）

import http from './http';

export default {
  methods: {
    async fetchData() {
      try {
        const response = await http.get('/resources');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
  }
};

POST 请求（新增数据）

async createData(payload) {
  try {
    const response = await http.post('/resources', payload);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

PUT 请求（更新数据）

async updateData(id, payload) {
  try {
    const response = await http.put(`/resources/${id}`, payload);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

DELETE 请求（删除数据）

async deleteData(id) {
  try {
    const response = await http.delete(`/resources/${id}`);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

使用 Vuex 管理状态

对于复杂应用，可以使用 Vuex 集中管理 RESTful 操作的状态。

Vuex 示例

import http from '../http';

const actions = {
  async fetchResources({ commit }) {
    const response = await http.get('/resources');
    commit('SET_RESOURCES', response);
  },
  async createResource({ commit }, payload) {
    const response = await http.post('/resources', payload);
    commit('ADD_RESOURCE', response);
  }
};

const mutations = {
  SET_RESOURCES(state, resources) {
    state.resources = resources;
  },
  ADD_RESOURCE(state, resource) {
    state.resources.push(resource);
  }
};

const state = {
  resources: []
};

export default {
  state,
  actions,
  mutations
};

处理 RESTful 响应

RESTful API 通常返回标准化的响应格式，可以在拦截器中统一处理。

响应格式示例

{
  code: 200,
  data: {}, // 实际数据
  message: '操作成功'
}

拦截器调整

http.interceptors.response.use(
  response => {
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      return Promise.reject(response.data.message);
    }
  },
  error => {
    return Promise.reject(error);
  }
);

错误处理

统一处理 RESTful 请求中的错误，例如网络问题或权限不足。

全局错误处理

http.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

通过以上方法，可以在 Vue 中高效实现 REST 风格的数据交互。