小程序中如何用axios实现loading效果？

在小程序开发中,loading效果是提升用户体验的重要环节，它能够在数据加载、网络请求等耗时操作时给用户明确的反馈，Axios作为一款流行的HTTP客户端库，凭借其简洁的API和强大的功能，被广泛应用于小程序开发中，本文将详细介绍如何使用Axios实现小程序的loading效果，包括基本原理、具体实现步骤、优化方案及常见问题处理。

Axios与小程序Loading的结合原理

在小程序中,loading效果通常通过调用wx.showLoading和wx.hideLoadingAPI来实现。wx.showLoading用于显示loading提示框，wx.hideLoading用于隐藏，Axios作为请求库，可以在请求拦截器和响应拦截器中统一处理loading的显示与隐藏，从而避免在每个请求中重复调用相关API，提高代码的可维护性。

结合的核心思路是：在发起请求前通过拦截器调用wx.showLoading，在请求成功或失败后调用wx.hideLoading，为了防止多个请求同时触发多个loading，可以通过计数器或全局标志位来管理loading的显示状态。

基于Axios的Loading实现步骤

安装与引入Axios

在小程序项目中安装Axios,可以通过npm或yarn进行安装：

npm install axios

安装完成后,在项目需要的页面或工具类中引入Axios：

const axios = require('axios');

配置Axios实例

为了避免全局配置污染,建议创建一个独立的Axios实例，并配置基础信息（如 baseURL、timeout 等）：

const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  header: {
    'Content-Type': 'application/json'
  }
});

添加请求拦截器

在请求拦截器中,调用wx.showLoading显示loading，并可以统一处理请求头（如添加token）：

request.interceptors.request.use(
  config => {
    wx.showLoading({
      title: '加载中...',
      mask: true // 防止触摸穿透
    });
    // 从本地存储获取token并添加到请求头
    const token = wx.getStorageSync('token');
    if (token) {
      config.header.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    wx.hideLoading();
    return Promise.reject(error);
  }
);

添加响应拦截器

在响应拦截器中,无论请求成功或失败，都需要调用wx.hideLoading隐藏loading，可以统一处理错误信息：

request.interceptors.response.use(
  response => {
    wx.hideLoading();
    const { data } = response;
    if (data.code === 200) {
      return data;
    } else {
      wx.showToast({
        title: data.message || '请求失败',
        icon: 'none'
      });
      return Promise.reject(data);
    }
  },
  error => {
    wx.hideLoading();
    const { response } = error;
    if (response) {
      // 服务器返回错误
      wx.showToast({
        title: response.data.message || '服务器错误',
        icon: 'none'
      });
    } else {
      // 请求超时或网络错误
      wx.showToast({
        title: '网络连接失败',
        icon: 'none'
      });
    }
    return Promise.reject(error);
  }
);

封装请求方法

为了方便调用,可以封装GET、POST等常用请求方法：

const http = {
  get(url, params) {
    return request.get(url, { params });
  },
  post(url, data) {
    return request.post(url, data);
  }
};

在页面中使用

在页面中调用封装的请求方法,loading效果会自动触发：

Page({
  onLoad() {
    http.get('/api/data', { id: 1 })
      .then(res => {
        console.log('请求成功', res);
      })
      .catch(err => {
        console.error('请求失败', err);
      });
  }
});

Loading状态的优化方案

防止重复显示Loading

当多个请求同时发起时,可能会出现多个loading叠加的问题，可以通过计数器来解决：

let loadingCount = 0;
request.interceptors.request.use(config => {
  if (loadingCount === 0) {
    wx.showLoading({ title: '加载中...', mask: true });
  }
  loadingCount++;
  return config;
});
request.interceptors.response.use(
  response => {
    loadingCount--;
    if (loadingCount === 0) {
      wx.hideLoading();
    }
    return response;
  },
  error => {
    loadingCount--;
    if (loadingCount === 0) {
      wx.hideLoading();
    }
    return Promise.reject(error);
  }
);

自定义Loading样式

小程序的loading支持自定义标题和图标,可以通过配置wx.showLoading的参数来实现：

wx.showLoading({ '正在加载...',
  mask: true,
  success: () => {
    console.log('loading显示成功');
  }
});

请求超时处理

在Axios实例中配置timeout，并在响应拦截器中处理超时错误：

request.interceptors.response.use(
  response => response,
  error => {
    if (error.code === 'ECONNABORTED') {
      wx.showToast({
        title: '请求超时',
        icon: 'none'
      });
    }
    return Promise.reject(error);
  }
);

常见问题与解决方案

问题1：loading不显示或隐藏失败

原因分析：

• 忘记在拦截器中调用wx.showLoading或wx.hideLoading。
• 调用wx.hideLoading时，wx.showLoading未执行。
• 多个请求并发时,计数器逻辑错误。

解决方案：

• 检查拦截器配置,确保wx.showLoading和wx.hideLoading成对调用。
• 使用计数器管理多个请求的loading状态。
• 在调试模式下打印日志,确认执行流程。

问题2：loading遮挡页面内容

原因分析：

• 未设置mask: true，导致用户仍可点击页面内容。
• loading层级过高,遮挡了其他组件。

解决方案：

• 在wx.showLoading中添加mask: true参数，防止触摸穿透。
• 检查页面样式,确保loading的z-index合理。

FAQs

问题1：如何为不同请求设置不同的loading提示？
解答：可以在请求拦截器中根据请求的URL或参数动态设置loading的标题。

request.interceptors.request.use(config => {
  const loadingTitle = config.url.includes('/login') ? '登录中...' : '加载中...';
  wx.showLoading({ title: loadingTitle, mask: true });
  return config;
});

问题2：如何在请求失败时保留loading并显示错误提示？
解答：在响应拦截器的错误处理中，先隐藏loading，再显示错误提示，如果需要保留loading，可以延迟隐藏loading或使用自定义弹窗替代loading。

request.interceptors.response.use(
  response => {
    wx.hideLoading();
    return response;
  },
  error => {
    wx.hideLoading();
    wx.showToast({
      title: '请求失败，请重试',
      icon: 'none',
      duration: 2000
    });
    return Promise.reject(error);
  }
);