如何在Sencha Touch 2.x多Ajax请求中实现带百分比的进度指示器

没问题，我来帮你搞定这个需求——给多个Ajax请求加上能显示完成百分比的进度指示器，比如2个请求完成一个就显示50%的进度。核心思路就是跟踪已完成的请求数，对比总请求数计算百分比，实时更新进度组件，下面是具体的实现步骤和代码：

1. 先创建进度指示器组件 #

Sencha Touch自带了Ext.ProgressIndicator组件，我们可以用它来做进度显示，还能自定义显示的文本（比如百分比）：

// 可以在应用初始化或者控制器的init方法里创建这个组件
var progressIndicator = Ext.create('Ext.ProgressIndicator', {
    floating: true,  // 浮动在页面上方
    centered: true,  // 居中显示
    width: 250,      // 设置宽度
    text: '0% 完成', // 初始文本
    hidden: true     // 默认隐藏，发起请求时再显示
});
// 把组件添加到视图容器
Ext.Viewport.add(progressIndicator);

2. 实现请求跟踪与进度更新逻辑 #

我们需要两个变量来跟踪请求状态：总请求数和已完成请求数，再封装一个更新进度的通用函数：

// 定义跟踪变量（可以放在控制器的config里，或者封装成全局工具类）
var totalRequests = 2;       // 这里是你的总请求数量，比如2个
var completedRequests = 0;   // 已完成的请求数，初始为0

// 更新进度的通用函数
function updateProgress() {
    completedRequests++;
    // 计算完成百分比，取整
    var percentage = Math.round((completedRequests / totalRequests) * 100);
    
    // 更新进度条的进度和显示文本
    progressIndicator.setProgress(percentage / 100);
    progressIndicator.setText(`${percentage}% 完成`);
    
    // 所有请求完成后，延迟隐藏进度条并重置计数器
    if (completedRequests === totalRequests) {
        setTimeout(function() {
            progressIndicator.hide();
            completedRequests = 0; // 重置，方便下次使用
        }, 500);
    }
}

3. 给每个Ajax请求绑定进度更新 #

在每个请求的success（和failure，根据业务需求）回调里调用updateProgress函数：

// 第一个Ajax请求
Ext.Ajax.request({
    url: 'your-first-api-url',
    method: 'GET',
    success: function(response) {
        // 这里处理你的业务逻辑，比如解析返回数据
        console.log('第一个请求成功');
        // 更新进度
        updateProgress();
    },
    failure: function(response) {
        // 失败场景处理：如果失败也算完成（比如允许部分失败），就调用updateProgress
        console.log('第一个请求失败');
        updateProgress();
        // 如果失败需要重试或者不计入完成，可以在这里调整逻辑
    },
    scope: this
});

// 第二个Ajax请求
Ext.Ajax.request({
    url: 'your-second-api-url',
    method: 'POST',
    params: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        console.log('第二个请求成功');
        updateProgress();
    },
    failure: function(response) {
        console.log('第二个请求失败');
        updateProgress();
    },
    scope: this
});

4. 发起请求前显示进度条 #

在所有请求发起前，记得显示进度条并初始化状态：

// 显示进度条，重置进度为0
progressIndicator.show();
progressIndicator.setProgress(0);
progressIndicator.setText('0% 完成');

进阶：封装成可复用的工具类 #

如果你的项目里经常需要处理多请求进度，可以把这些逻辑封装成单例工具类，方便复用：

Ext.define('YourApp.util.RequestProgressManager', {
    singleton: true,  // 单例模式，全局唯一实例
    
    totalRequests: 0,
    completedRequests: 0,
    progressIndicator: null,
    
    // 初始化进度组件
    init: function() {
        this.progressIndicator = Ext.create('Ext.ProgressIndicator', {
            floating: true,
            centered: true,
            width: 250,
            text: '0% 完成',
            hidden: true
        });
        Ext.Viewport.add(this.progressIndicator);
    },
    
    // 批量发起请求并跟踪进度
    startBatchRequests: function(requestConfigs) {
        this.totalRequests = requestConfigs.length;
        this.completedRequests = 0;
        
        // 显示进度条
        this.progressIndicator.show();
        this.progressIndicator.setProgress(0);
        this.progressIndicator.setText('0% 完成');
        
        // 遍历发起所有请求
        Ext.each(requestConfigs, function(reqConfig) {
            // 保存原始的回调函数
            var originalSuccess = reqConfig.success;
            var originalFailure = reqConfig.failure;
            
            // 重写success回调，自动更新进度
            reqConfig.success = function(response) {
                if (originalSuccess) {
                    originalSuccess.call(this, response);
                }
                this.updateProgress();
            };
            
            // 重写failure回调，按需更新进度
            reqConfig.failure = function(response) {
                if (originalFailure) {
                    originalFailure.call(this, response);
                }
                this.updateProgress();
            };
            
            reqConfig.scope = this;
            // 发起请求
            Ext.Ajax.request(reqConfig);
        }, this);
    },
    
    // 内部进度更新方法
    updateProgress: function() {
        this.completedRequests++;
        var percentage = Math.round((this.completedRequests / this.totalRequests) * 100);
        
        this.progressIndicator.setProgress(percentage / 100);
        this.progressIndicator.setText(`${percentage}% 完成`);
        
        if (this.completedRequests === this.totalRequests) {
            var me = this;
            setTimeout(function() {
                me.progressIndicator.hide();
                // 重置状态
                me.completedRequests = 0;
                me.totalRequests = 0;
            }, 500);
        }
    }
});

使用这个工具类的示例： #

// 应用初始化时先初始化工具类
YourApp.util.RequestProgressManager.init();

// 定义你的请求数组
var batchRequests = [
    {
        url: 'api-url-1',
        method: 'GET',
        success: function(response) {
            // 处理第一个请求的业务逻辑
        }
    },
    {
        url: 'api-url-2',
        method: 'POST',
        params: {data: 'test'},
        success: function(response) {
            // 处理第二个请求的业务逻辑
        }
    }
];

// 发起批量请求并显示进度
YourApp.util.RequestProgressManager.startBatchRequests(batchRequests);

注意事项 #

• 动态请求数量：如果总请求数是动态的（比如从接口获取），记得先统计数量再赋值给totalRequests。
• 失败处理：根据你的业务需求决定失败的请求是否计入完成数——如果要求所有请求必须成功，那失败时可以提示用户并重置进度条，而不是调用updateProgress。
• 性能优化：如果请求数量很多，避免频繁更新DOM，可以适当做防抖处理，但Sencha Touch的组件已经做了优化，一般不需要额外处理。

内容的提问来源于stack exchange，提问作者Solat Abbas