axios转圈等待

原创

mob649e8168f1bb 2023-11-23 06:45:16 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8168f1bb的原创作品，请联系作者获取转载授权，否则将追究法律责任

axios转圈等待实现教程

1. 整体流程

首先，我们需要了解整个实现“axios转圈等待”的流程。以下是该流程的简要概述：

步骤	描述
1	发送axios请求前，显示加载动画
2	发送axios请求
3	请求成功，隐藏加载动画并处理返回的数据
4	请求失败，隐藏加载动画并处理错误信息

接下来，我们将详细说明每个步骤如何实现。

2. 步骤详解

步骤1：显示加载动画

在发送axios请求之前，我们需要显示一个加载动画，以提醒用户正在等待数据的加载。可以使用CSS样式和JavaScript代码来创建和控制加载动画。以下是一种实现方式：

<!-- 在HTML文件中添加一个用于显示加载动画的元素 -->
<div id="loading" style="display: none;">
  <img src="loading.gif" alt="Loading..." />
  <p>加载中...</p>
</div>

// 在发送请求前显示加载动画
axios.interceptors.request.use(function (config) {
  document.getElementById('loading').style.display = 'block';
  return config;
}, function (error) {
  return Promise.reject(error);
});

上述代码中，我们在HTML文件中添加了一个带有id为"loading"的元素，用于显示加载动画。然后，在发送请求之前，通过axios的拦截器，在请求配置中显示加载动画。

步骤2：发送axios请求

接下来，我们使用axios发送请求，获取需要的数据。以下是一个简单的示例：

axios.get('
  .then(function (response) {
    // 处理返回的数据
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误信息
    console.error(error);
  });

上述代码中，我们使用axios的get方法发送一个GET请求，并在then方法中处理返回的数据，在catch方法中处理请求失败的情况。

步骤3：隐藏加载动画并处理返回的数据

当请求成功返回数据后，我们需要隐藏加载动画，并处理返回的数据。以下是一种实现方式：

// 请求成功后隐藏加载动画并处理返回的数据
axios.interceptors.response.use(function (response) {
  document.getElementById('loading').style.display = 'none';
  // 处理返回的数据
  console.log(response.data);
  return response;
}, function (error) {
  return Promise.reject(error);
});

上述代码中，我们在axios的拦截器中，当请求成功返回数据时，隐藏加载动画，并在response对象中处理返回的数据。

步骤4：隐藏加载动画并处理错误信息

如果请求失败，我们也需要隐藏加载动画，并处理错误信息。以下是一种实现方式：

// 请求失败时隐藏加载动画并处理错误信息
axios.interceptors.response.use(function (response) {
  document.getElementById('loading').style.display = 'none';
  return response;
}, function (error) {
  // 隐藏加载动画
  document.getElementById('loading').style.display = 'none';
  // 处理错误信息
  console.error(error);
  return Promise.reject(error);
});

上述代码中，我们在axios的拦截器中，当请求失败时，隐藏加载动画，并处理错误信息。