小程序如何用axios简单实现延时loading？

在小程序开发中,网络请求是常见功能，而loading指示器能有效提升用户体验，本文将介绍如何基于axios简单实现小程序延时loading指示，避免频繁触发加载动画，优化交互细节。

核心思路

延时loading的核心逻辑是通过setTimeout延迟显示loading,若请求在短时间内完成，则取消loading显示，具体步骤包括：封装axios请求、设置延时器、管理loading状态，并在请求完成后清理延时器。

实现步骤

封装axios请求

在小程序中引入axios或使用其核心方法,由于小程序原生不支持axios，可通过npm安装后构建使用，或直接使用其适配代码，以下是简化版请求封装：

const request = (options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'GET',
      data: options.data,
      success: resolve,
      fail: reject
    });
  });
};

添加延时loading逻辑

在请求封装中引入延时控制,设置默认延时时间为300ms（可调整），代码如下：

const requestWithLoading = (options, delay = 300) => {
  let loadingTimer = null;
  return new Promise((resolve, reject) => {
    // 延时显示loading
    loadingTimer = setTimeout(() => {
      wx.showLoading({ title: '加载中...' });
    }, delay);
    request(options)
      .then(res => {
        clearTimeout(loadingTimer);
        resolve(res);
      })
      .catch(err => {
        clearTimeout(loadingTimer);
        reject(err);
      })
      .finally(() => {
        // 确保loading在请求结束后隐藏
        if (loadingTimer) {
          clearTimeout(loadingTimer);
          wx.hideLoading();
        }
      });
  });
};

状态管理优化

为避免多个请求同时触发多个loading,可通过全局变量管理loading状态。

let isLoading = false;
const requestWithLoading = (options, delay = 300) => {
  let loadingTimer = null;
  return new Promise((resolve, reject) => {
    loadingTimer = setTimeout(() => {
      if (!isLoading) {
        isLoading = true;
        wx.showLoading({ title: '加载中...' });
      }
    }, delay);
    request(options)
      .then(res => {
        clearTimeout(loadingTimer);
        resolve(res);
      })
      .catch(err => {
        clearTimeout(loadingTimer);
        reject(err);
      })
      .finally(() => {
        clearTimeout(loadingTimer);
        if (isLoading) {
          isLoading = false;
          wx.hideLoading();
        }
      });
  });
};

使用示例

在页面中调用封装后的请求方法：

Page({
  onLoad() {
    requestWithLoading({ url: 'https://api.example.com/data' })
      .then(res => {
        console.log('请求成功', res);
      })
      .catch(err => {
        console.error('请求失败', err);
      });
  }
});

注意事项

1. 延时时间设置：根据实际网络环境调整延时时间，通常200-500ms为宜。
2. 异常处理：确保请求失败时也能隐藏loading，避免界面卡顿。
3. 全局状态：若页面存在多个并发请求，需合理管理loading状态，避免重复显示。

相关问答FAQs

Q1：为什么需要延时loading而不是立即显示？
A1：立即显示loading可能会导致短暂请求（如本地缓存数据）频繁触发动画，影响用户体验，延时loading可过滤掉瞬时请求，仅在耗时操作时显示，提升交互流畅性。

Q2：如何处理多个并发请求的loading状态？
A2：可通过计数器或全局状态变量管理，每次请求开始时计数器+1，计数器从0变为1时显示loading；请求完成时计数器-1，计数器归0时隐藏loading，避免多个请求同时触发多个loading实例。