优雅封装消息提示框与 Axios 请求遮罩层：赋能前端交互体验

2023-10-21 23:30:15

导言

在现代 Web 开发中，消息提示框和请求遮罩层已成为必不可少的元素，用于向用户提供反馈并改善交互体验。本文将探讨如何使用 Axios 库优雅地封装这两个元素，从而简化开发流程并提升用户满意度。

Axios 请求遮罩层

拦截器实现

Axios 提供了请求和响应拦截器的强大功能，允许我们对请求和响应进行预处理和后处理。要创建请求遮罩层，我们可以在请求拦截器中触发一个函数，在发送请求时显示加载指示器。

// 请求拦截器，在发送请求前触发
axios.interceptors.request.use(config => {
  // 显示加载指示器
  showLoading();

  return config;
});

消息提示框封装

模态框组件

为了封装消息提示框，我们可以创建一个可重用的模态框组件。该组件应接受一个消息文本作为参数，并在显示时将消息显示在模态框中。

// 模态框组件
const Modal = ({ message }) => {
  return (
    <div className="modal-container">
      <p>{message}</p>
    </div>
  );
};

集成 Axios

现在，我们可以将模态框组件与 Axios 集成，在响应拦截器中根据响应状态显示消息提示框。

// 响应拦截器，在收到响应后触发
axios.interceptors.response.use(response => {
  // 隐藏加载指示器
  hideLoading();

  return response;
}, error => {
  // 捕获错误并显示错误消息提示框
  hideLoading();
  showModal(error.message);

  return Promise.reject(error);
});

优势

这种封装方法提供了以下优势：

可重用性： 消息提示框和请求遮罩层可以作为可重用的组件，轻松集成到任何需要它们的页面中。
代码简洁： 封装简化了代码，使其更易于维护和理解。
用户体验优化： 遮罩层和提示框提供了友好的用户体验，为用户提供了有关请求和应用程序状态的清晰反馈。

示例用法

要使用封装后的功能，您只需在组件中调用以下函数：

// 显示加载指示器
showLoading();

// 发送 Axios 请求
axios.get('/api/data')
  .then(response => {
    // 隐藏加载指示器
    hideLoading();

    // 使用响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 隐藏加载指示器
    hideLoading();

    // 显示错误消息提示框
    showModal(error.message);
  });