多文件JS场景下如何将回调数组替换为单个Promise实现POST请求后统一触发

你的需求完全可以实现，我们提供两种适配不同场景的方案：

方案1：单Promise实现（仅适用请求仅触发1次的场景） #

因为Promise一旦决议（resolve/reject）状态就永久固定，如果你这个POST请求只会触发一次，完全可以用单个Promise替换回调数组：

修改后的update.js代码 #

class UpdateClass {
    constructor() {
        // 初始化Promise，把resolve方法暴露到实例上
        this.requestComplete = new Promise(resolve => {
            this.resolveComplete = resolve;
        })
    }

    success(callback) {
        // 所有回调都注册到Promise的then队列
        this.requestComplete.then(callback);
    }

    endRequest() {
        // 请求完成时触发Promise决议
        this.resolveComplete();
    }
}

const Update = new UpdateClass();
export default Update;

调用方适配 #

你原来的file1.js、file2.js、app.js的代码完全不用改即可正常运行，甚至还可以用async/await的写法更简洁：

// 比如file1.js的init方法可以改写为
async init() {
    exampleFunction();
    await Update.requestComplete;
    this.update();
}

⚠️ 注意：如果你的按钮可以多次点击重复触发POST请求，该方案不适用，第一次触发后Promise就已经决议，后续再调用endRequest也不会执行新的回调。

方案2：EventTarget实现（更优，支持多次触发请求） #

如果你需要支持多次点击发请求，每次请求完成都触发回调，原生的EventTarget比自己维护回调数组或者用Promise更规范，也更灵活：

修改后的update.js代码 #

class UpdateClass extends EventTarget {
    success(callback) {
        // 注册请求完成的事件监听
        this.addEventListener('requestComplete', callback);
    }

    endRequest(responseData = null) {
        // 触发自定义事件，支持传递响应数据给回调
        this.dispatchEvent(new CustomEvent('requestComplete', { detail: responseData }));
    }
}

const Update = new UpdateClass();
export default Update;

优势 #

• 支持多次触发请求，每次请求完成都会执行所有注册的回调
• 原生API实现，不用自己维护回调数组，降低bug概率
• 支持传递响应数据，回调中可以直接获取请求返回的结果：

// 回调中接收返回数据示例
update(e) {
    console.log('请求返回的数据：', e.detail);
    exampleFunctionAfterUpdate();
}

原有代码隐藏问题修复 #

你现有代码里Update.success(this.update)的写法会导致update方法执行时this指向丢失，建议改成以下两种写法之一：

// 写法1：bind绑定this
Update.success(this.update.bind(this));
// 写法2：用箭头函数包裹
Update.success(() => this.update());

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