基于AngularJS实现API请求同步队列的技术问询

云原生阿岚

2026-8-8

AngularJS 实现API请求同步队列

问题场景

拖拽实体到白板画布时，会调用类x的y方法，每次调用触发一个API请求。需要让快速拖拽产生的多个请求按顺序执行——前一个请求完成后再启动下一个，形成同步队列。

原方案的问题

原代码通过setInterval轮询队列状态，存在竞态条件：多个请求可能同时判断队列为空，导致并发执行，无法保证顺序。

正确实现方式

利用AngularJS中$http返回Promise的特性，维护一个Promise链来实现可靠的同步队列：

class x {
    // 初始化一个已完成的Promise，确保第一个请求能立即执行
    private requestQueue: Promise<any> = Promise.resolve();

    // 注入AngularJS的$http服务用于发起API请求
    constructor(private $http: ng.IHttpService) {}

    public y() {
        // 将新请求追加到队列链末尾
        this.requestQueue = this.requestQueue.then(() => {
            // 返回请求的Promise，等待其完成后再执行下一个请求
            return this.restRequest();
        });
    }

    private restRequest(): Promise<any> {
        // 替换为实际API请求逻辑，返回$http的Promise
        return this.$http({
            method: 'POST', // 根据实际需求选择请求方法
            url: '/your-api-url',
            data: {} // 请求参数
        }).then((response) => {
            // 请求成功后的处理
            console.log('请求完成:', response.data);
            return response.data;
        }).catch((error) => {
            // 请求错误处理，若希望队列继续执行则返回resolve，否则抛出错误中断队列
            console.error('请求失败:', error);
            return Promise.resolve();
        });
    }
}