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 组件显示错误
};