封装axios

前言

在现代Web开发中，前后端分离的方式已经得到了广泛的应用。而在前后端分离的架构中，前端需要与后端进行数据交互，以便获取数据或将数据发送给后端。为了方便地进行数据交互，我们通常会使用类似于jQuery的AJAX库或是比较流行的axios库。

然而，由于不同的项目需求和团队的编码习惯不同，使用原生的axios并不能完全满足我们的需求。因此，我们需要对axios进行封装，以便更好地满足我们的需求。

为什么要封装axios？

在日常开发中，我们可能会遇到以下问题：

网络请求时间过长，页面出现“卡顿”现象，用户体验差。
当网络请求失败时，界面上没有任何提示信息。
多个组件中需要进行相同的网络请求，代码重复率高。

因此，我们需要封装axios来解决这些问题。

如何封装axios？

创建axios实例

我们可以通过创建一个axios实例来进行封装，这样可以更好地隔离不同的业务逻辑，并且可以对每个实例进行一些通用的配置。例如，设置默认的请求头、设置超时时间等。

javascript复制代码
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com/', // 设置基础URL
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json' // 设置默认的请求头
  }
})

export default instance

封装请求方法

我们可以封装通用的请求方法，例如GET、POST等，这样可以避免在每个组件中都编写一遍类似的代码，同时也可以提高代码的可维护性。

javascript复制代码
import instance from './axios'

/**
 * get请求
 * @param {String} url 请求地址
 * @param {Object} params 请求参数
 */
export const get = (url, params) => {
  return instance.get(url, {
    params
  })
}

/**
 * post请求
 * @param {String} url 请求地址
 * @param {Object} data 请求数据
 */
export const post = (url, data) => {
  return instance.post(url, data)
}

错误处理

对于网络请求失败的情况，我们需要进行错误处理。我们可以通过Promise的reject方法来实现错误处理。

javascript复制代码
import axios from 'axios'

const instance = axios.create({
  // ...
})

instance.interceptors.response.use(response => {
  return response.data
}, error => {
  // 对于请求失败的情况，我们可以通过Promise的reject方法来实现错误处理。
  return Promise.reject(error)
})

export default instance

加载动画

为了提高用户体验，我们可以在网络请求过程中添加一个加载动画。我们可以在请求开始时显示加载动画，在请求结束时隐藏加载动画。

javascript复制代码
import { Loading } from 'element-ui';
import axios from 'axios';

let loadingInstance = null;

// 请求拦截器，加载动画
axios.interceptors.request.use(config => {
  loadingInstance = Loading.service({
    lock: true,
    text: '正在加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器，关闭动画
axios.interceptors.response.use(response => {
  loadingInstance.close();
  return response.data;
}, error => {
  loadingInstance.close();
  return Promise.reject(error);
});

export default axios;

总结

通过封装axios，我们可以减少代码冗余，提高代码的可维护性，并且可以更好地处理网络请求失败的情况。在实际开发中，我们需要根据具体的业务需求来进行适当的