如何从已解析Promise获取属性？实现单次Fetch请求供多回调复用数据

当然可以实现！Promise的特性正好能帮你解决这个问题——你不需要额外复杂的缓存逻辑，只需要把getData()调用返回的Promise对象保存起来，让多个.then()回调都挂载到这个同一个Promise上就行，这样只会触发一次fetch请求，所有回调都会共享请求完成后的结果。

具体实现代码 #

async function getData(){ 
  const response = await fetch('api-url'); 
  return await response.json(); 
} 
function foo(data){ /* 处理data的逻辑 */ } 
function bar(data){ /* 处理data的逻辑 */ }

// 关键：只调用一次getData，把返回的Promise缓存起来
const sharedDataPromise = getData();

// 多个回调复用这个Promise，不会重复发起请求
const doFoo = sharedDataPromise.then(foo);
const doBar = sharedDataPromise.then(bar);

原理说明 #

Promise有一个核心特性：状态一旦确定（resolved或rejected）就不会再改变，并且所有后续添加的.then()（或.catch()）回调都会直接拿到这个已经确定的结果。

因为你只执行了一次getData()，里面的fetch请求只会发起一次；当请求完成后，sharedDataPromise的状态变为resolved并保存了返回的JSON数据，之后不管多少个.then()挂载上来，都会直接复用这个数据，不会触发新的请求。

额外补充：错误处理 #

如果需要统一处理请求错误，可以直接给共享的Promise添加.catch()：

sharedDataPromise.catch(error => {
  console.error('请求失败:', error);
  // 这里可以添加全局错误处理逻辑
});

这样所有依赖这个Promise的回调都能共享同一个错误处理逻辑，不用每个.then()都单独加catch。

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