如何在小程序中使用Axios实现Loading效果？

使用 Axios 实现小程序中的加载效果

一、

在微信小程序中，通过 Axios 实现加载效果是一种常见的需求，Axios 是一个基于 Promise 的 HTTP 客户端，可以方便地进行异步请求操作，而微信小程序提供了丰富的 API 用于显示和隐藏加载状态，本文将详细介绍如何结合 Axios 和微信小程序的加载 API 实现加载效果。

二、基本概念

1、Axios：一个基于 Promise 的 HTTP 客户端，支持浏览器端和 Node.js 环境。

2、微信小程序加载 API：微信小程序提供了wx.showLoading 和wx.hideLoading 方法，用于显示和隐藏加载提示框。

3、拦截器：Axios 允许在请求或响应被then 或catch 处理前拦截它们，通过拦截器，我们可以在发送请求前显示加载效果，在响应后隐藏加载效果。

三、实现步骤

1. 安装 Axios

如果还没有安装 Axios，可以使用以下命令进行安装：

npm install axios

2. 创建 Axios 实例并配置拦截器

我们需要创建一个 Axios 实例，并在该实例上配置请求和响应拦截器，在请求拦截器中，我们显示加载提示；在响应拦截器中，我们隐藏加载提示。

const axios = require('axios');
let loadingInstance = null;
// 创建 Axios 实例
const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 5000
});
// 请求拦截器
instance.interceptors.request.use(config => {
    loadingInstance = wx.showLoading({
        title: '加载中...',
        mask: true // 是否显示透明蒙层，防止触摸穿透
    });
    return config;
}, error => {
    if (loadingInstance) {
        wx.hideLoading();
    }
    return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
    if (loadingInstance) {
        wx.hideLoading();
    }
    return response;
}, error => {
    if (loadingInstance) {
        wx.hideLoading();
    }
    return Promise.reject(error);
});

3. 使用 Axios 实例进行请求

现在我们可以正常使用这个配置了拦截器的 Axios 实例进行请求了，每当发送请求时，会自动显示加载提示；当请求完成时，无论是成功还是失败，都会自动隐藏加载提示。

instance.get('/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

四、示例代码

以下是一个完整的示例代码，展示了如何在微信小程序中使用 Axios 实现加载效果：

// app.js
App({
    onLaunch() {
        // 初始化 Axios 实例
        const axios = require('axios');
        let loadingInstance = null;
        // 创建 Axios 实例
        const instance = axios.create({
            baseURL: 'https://api.example.com',
            timeout: 5000
        });
        // 请求拦截器
        instance.interceptors.request.use(config => {
            loadingInstance = wx.showLoading({
                title: '加载中...',
                mask: true // 是否显示透明蒙层，防止触摸穿透
            });
            return config;
        }, error => {
            if (loadingInstance) {
                wx.hideLoading();
            }
            return Promise.reject(error);
        });
        // 响应拦截器
        instance.interceptors.response.use(response => {
            if (loadingInstance) {
                wx.hideLoading();
            }
            return response;
        }, error => {
            if (loadingInstance) {
                wx.hideLoading();
            }
            return Promise.reject(error);
        });
    }
});

五、相关问题与解答

问题1：如何在请求错误时显示不同的加载提示？

解答：可以在请求拦截器的use 方法中传递一个函数，该函数接收两个参数：config 和error，在error 参数中，我们可以判断请求错误的类型，并根据不同的错误类型显示不同的加载提示。

instance.interceptors.request.use(config => {
    // 显示默认加载提示
    loadingInstance = wx.showLoading({
        title: '加载中...',
        mask: true // 是否显示透明蒙层，防止触摸穿透
    });
    return config;
}, error => {
    // 根据错误类型显示不同的加载提示
    if (error.response && error.response.status === 404) {
        wx.showToast({
            title: '资源未找到',
            icon: 'none'
        });
    } else {
        wx.showToast({
            title: '加载失败',
            icon: 'none'
        });
    }
    if (loadingInstance) {
        wx.hideLoading();
    }
    return Promise.reject(error);
});

问题2：如何在某些特定请求中不显示加载提示？

解答：可以在发送请求时通过配置项来控制是否显示加载提示，可以添加一个showLoading 字段来控制：

instance.get('/data', { showLoading: false })
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

然后在请求拦截器中根据showLoading 字段的值决定是否显示加载提示：

instance.interceptors.request.use(config => {
    if (config.showLoading) {
        loadingInstance = wx.showLoading({
            title: '加载中...',
            mask: true // 是否显示透明蒙层，防止触摸穿透
        });
    }
    return config;
}, error => {
    if (loadingInstance) {
        wx.hideLoading();
    }
    return Promise.reject(error);
});

以上内容就是解答有关“axios实现小程序loading”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。