当前位置：首页 > VUE

vue.js实现restful

2026-01-20 08:00:51VUE

Vue.js 实现 RESTful API 调用

在 Vue.js 中实现 RESTful API 调用通常涉及以下几个关键步骤：

安装 Axios Axios 是一个流行的 HTTP 客户端，用于发送 RESTful 请求。可以通过 npm 或 yarn 安装：

npm install axios

创建 API 服务模块 建议将 API 调用封装成独立的服务模块，便于维护和复用。例如，创建一个 api.js 文件：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

export default {
  getResources() {
    return apiClient.get('/resources');
  },
  getResource(id) {
    return apiClient.get(`/resources/${id}`);
  },
  createResource(data) {
    return apiClient.post('/resources', data);
  },
  updateResource(id, data) {
    return apiClient.put(`/resources/${id}`, data);
  },
  deleteResource(id) {
    return apiClient.delete(`/resources/${id}`);
  },
};

在 Vue 组件中使用 API 服务 在 Vue 组件中导入并使用封装好的 API 服务：

import api from '@/services/api';

export default {
  data() {
    return {
      resources: [],
      newResource: { name: '', description: '' },
    };
  },
  async created() {
    this.resources = await api.getResources();
  },
  methods: {
    async addResource() {
      await api.createResource(this.newResource);
      this.resources = await api.getResources();
      this.newResource = { name: '', description: '' };
    },
    async removeResource(id) {
      await api.deleteResource(id);
      this.resources = await api.getResources();
    },
  },
};

处理响应和错误 建议添加全局拦截器处理响应和错误：

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

// 响应拦截器
apiClient.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);

使用 Vuex 管理状态（可选） 对于复杂应用，可以使用 Vuex 集中管理 API 获取的数据：

// store/modules/resources.js
const actions = {
  async fetchResources({ commit }) {
    const resources = await api.getResources();
    commit('SET_RESOURCES', resources);
  },
};

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

注意事项