如何二次封装elementui组件_vue二次封装axios

在Vue项目中，Element UI 是一个非常流行的UI框架，而 Axios 则是处理 HTTP 请求的利器。为了提高代码的可维护性和复用性，我们常常需要对这些工具进行二次封装。本文将介绍如何二次封装 Element UI 组件和 Vue 中的 Axios。

解决方案概述

通过二次封装，我们可以将常用的功能和配置集中管理，减少重复代码，提高开发效率。对于 Element UI 组件，可以通过创建自定义组件来实现；对于 Axios，则可以通过创建一个独立的请求模块来实现。

二次封装 Element UI 组件

创建自定义组件

假设我们需要频繁使用带有特定样式的按钮组件，可以通过创建一个自定义组件来实现。以下是一个简单的示例：

vue

  
    
  
</p>


export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}



.el-button {
  border-radius: 4px;
  padding: 10px 20px;
}


<p>

使用自定义组件

在其他组件中使用 CustomButton 非常简单：

vue

  <div>
    点击我
  </div>
</p>


import CustomButton from './CustomButton.vue';

export default {
  components: {
    CustomButton
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
}


<p>

二次封装 Axios

创建请求模块

我们可以创建一个独立的请求模块，集中管理 Axios 的配置和拦截器。以下是一个示例：

javascript
import axios from 'axios';</p>

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

<p>// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = <code>Bearer ${token};
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 响应拦截器instance.interceptors.response.use(  response => {    // 对响应数据做点什么    return response.data;  },  error => {    // 对响应错误做点什么    if (error.response.status === 401) {      // 处理未授权错误      console.error('未授权，请重新登录');    }    return Promise.reject(error);  });
export default instance;

使用请求模块

在 Vue 组件中使用封装后的 Axios 模块也非常简单：

javascript
import request from '@/utils/request';</p>

<p>export default {
  methods: {
    async fetchData() {
      try {
        const response = await request.get('/data');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
  }
}