如何在JavaScript/TypeScript中编写更简洁的两阶段Promise？

使用场景 #

• 若资源可立即获取，则直接返回该资源
• 若资源暂不可用，则显示模态框或加载指示器，等待资源就绪
• 模态框逻辑必须与Promise/请求逻辑解耦

是否有更优的设计模式来实现该需求？

初始实现代码 #

let twoStagePromise = (state: boolean): Promise<{ ready: boolean, wait: Promise<any>; }> => {
    return new Promise((resolve, reject) => {
        try {
            if (state) {
                resolve({
                    ready: true,
                    wait: new Promise((resolve, reject) => {
                        resolve([1, 2, 3]);
                    })
                });
            } else {
                resolve({
                    ready: false,
                    wait: new Promise((resolve, reject) => {
                        setTimeout(() => { resolve([1, 2, 3]); }, 1000);
                    })
                });
            }
        } catch (e) {
            reject(e);
        }
    });
};

twoStagePromise(false).then((data) => {
    if (!data.ready) {
        console.log('loading...');
    }
    return data.wait;
}).then((result) => {
    console.log("recieved result", result);
}).catch((error) => {
    console.log("try-catch failed or inner promise failed")
});

简化后的代码 #

参考评论反馈后，我大幅简化了代码：

let twoStagePromise = (state: boolean): Promise<number[] | Promise<number[]>> => {
    return new Promise((resolve, reject) => {
        try {
            if (state) {
                resolve([1, 2, 3]);
            } else {
                resolve(new Promise((resolve) => setTimeout(() => { resolve([1,2,3])  }, 1000)))
            }
        } catch (e) {
            reject(e);
        }
    });
};

twoStagePromise(false).then((dataOrPromise) => {
    if (dataOrPromise instanceof Promise) {
        console.log('loading...');
    }
    return dataOrPromise // continue the promise chain by returning the promise or data
}).then((result) => {
    console.log("recieved result", result);
}).catch((error) => {
    console.log("try-catch failed or inner promise failed", error)
});

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