JavaScript异步函数的单例模式实现方案问询

你的问题出在缓存时机不对：当前代码只缓存了API返回的最终数据，但第一次调用data()时，await dataFromAPI()会让函数暂停，此时dataCache还是undefined。这时候第二次调用data()，依然会进入请求逻辑，导致重复发起API调用。

解决思路很简单：缓存Promise本身，而不是等待Promise完成后再缓存结果。这样第一次调用时就把请求的Promise存起来，后续所有调用直接复用这个Promise，自然不会重复请求。

修改后的代码如下：

let dataCache;

const data = async () => {
  if (dataCache) return dataCache;
  // 直接缓存请求的Promise，不用等await完成
  dataCache = dataFromAPI();
  return dataCache;
}

如果dataFromAPI不是返回Promise的异步函数（比如它本身就是普通函数），也可以这样写，确保缓存的是Promise：

let dataCache;

const data = async () => {
  if (dataCache) return dataCache;
  // 缓存整个async函数的Promise
  dataCache = (async () => {
    const apiResponse = await dataFromAPI();
    return apiResponse;
  })();
  return dataCache;
}

现在再测试连续调用：

data().then(response => console.log(response))
data().then(response => console.log(response))

只会发起一次API请求，两个then都会拿到同一个响应结果，完美实现会话周期内的单例请求。

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