elementui axios

ElementUI 与 Axios 的集成

ElementUI 是一套基于 Vue.js 的桌面端组件库，而 Axios 是一个基于 Promise 的 HTTP 客户端。两者可以结合使用，实现高效的前后端数据交互。

安装依赖

确保项目中已安装 ElementUI 和 Axios。可以通过以下命令安装：

npm install element-ui axios

或使用 yarn：

yarn add element-ui axios

引入 ElementUI 和 Axios

在项目的入口文件（如 main.js）中引入 ElementUI 和 Axios：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';

Vue.use(ElementUI);
Vue.prototype.$axios = axios;

配置 Axios 实例

可以创建一个 Axios 实例，并配置全局的请求和响应拦截器：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加 token
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

Vue.prototype.$http = instance;

使用 Axios 发送请求

在 Vue 组件中，可以通过 this.$http 发送请求，并结合 ElementUI 的组件（如 Loading、Message）提升用户体验：

export default {
  methods: {
    fetchData() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });

      this.$http.get('/data')
        .then(response => {
          this.$message({
            message: '数据加载成功',
            type: 'success',
          });
          console.log(response);
        })
        .catch(error => {
          this.$message.error('数据加载失败');
          console.error(error);
        })
        .finally(() => {
          loading.close();
        });
    },
  },
};

处理表单提交

结合 ElementUI 的表单组件和 Axios 实现表单提交：

export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$http.post('/submit', this.form)
            .then(response => {
              this.$message.success('提交成功');
            })
            .catch(error => {
              this.$message.error('提交失败');
            });
        } else {
          return false;
        }
      });
    },
  },
};

错误处理

通过 Axios 的拦截器和 ElementUI 的 Message 组件统一处理错误：

instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          this.$message.error('未授权，请登录');
          break;
        case 404:
          this.$message.error('请求的资源不存在');
          break;
        default:
          this.$message.error('服务器错误');
      }
    }
    return Promise.reject(error);
  }
);

结合表格组件

使用 Axios 获取数据并渲染到 ElementUI 的表格组件中：

export default {
  data() {
    return {
      tableData: [],
      loading: false,
    };
  },
  created() {
    this.fetchTableData();
  },
  methods: {
    fetchTableData() {
      this.loading = true;
      this.$http.get('/table-data')
        .then(response => {
          this.tableData = response.data;
        })
        .catch(error => {
          this.$message.error('加载表格数据失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};

通过以上方法，可以高效地将 ElementUI 和 Axios 结合使用，实现数据的获取、提交和展示。