Vue项目中Axios同一资源并发请求的合并方案问询

你的思路完全正确——通过缓存未完成的Promise来合并重复请求，但你当前的代码有个关键问题：你依赖传入的success回调来传递数据，而不是让返回的Promise本身resolve数据。这就导致当第二个组件调用getShiftTypes时，虽然拿到了同一个Promise，但这个Promise的回调逻辑只绑定了第一个组件的success，第二个组件的回调根本没被触发。

问题出在哪？ #

在你原来的代码里，then回调里直接调用了传入的success(response.data)，但没有把数据return出去，所以这个Promise最终会resolve undefined。而且，当第二个组件调用方法时，它的success参数并没有被关联到已有的Promise上，自然收不到响应。

修正后的方案 #

我们需要让getShiftTypes返回一个能正确resolve数据的Promise，组件调用时通过自己的then来处理结果，而不是把回调传给方法。这样不管多少组件同时调用，只要共享同一个Promise，所有组件的then都会在请求完成时触发。

getShiftTypes(force = false) {
  // 1. 如果已有缓存且不需要强制刷新，直接返回已解析的Promise
  if (this.shiftTypes && !force) {
    return Promise.resolve(this.shiftTypes);
  }

  // 2. 如果已有正在进行的请求，直接返回这个Promise，避免重复请求
  if (this.getShiftTypesPromise && !force) {
    return this.getShiftTypesPromise;
  }

  // 3. 发起请求并缓存Promise
  this.getShiftTypesPromise = axios.get('/api/shift/type')
    .then(response => {
      // 缓存数据
      this.shiftTypes = response.data;
      // 关键：把数据返回，让Promise链传递给后续的then
      return response.data;
    })
    .catch(error => {
      // 全局处理错误（如果需要）
      this.handleError(error);
      // 抛出错误，让调用组件可以自行处理
      throw error;
    })
    .finally(() => {
      // 请求完成（无论成功失败）都清除Promise缓存
      this.getShiftTypesPromise = null;
    });

  return this.getShiftTypesPromise;
}

组件里怎么调用？ #

现在每个组件只需要调用方法后，用自己的then来处理数据：

组件A

this.getShiftTypes()
  .then(shiftTypes => {
    this.shiftTypes = shiftTypes;
    // 组件A的其他逻辑
  })
  .catch(err => {
    // 组件A的错误处理
  });

组件B

this.getShiftTypes()
  .then(shiftTypes => {
    this.shiftTypes = shiftTypes;
    // 组件B的其他逻辑
  })
  .catch(err => {
    // 组件B的错误处理
  });

额外优化点 #

• 使用finally清除Promise缓存：不管请求成功还是失败，都要清除缓存的Promise，避免下次请求拿到一个已settled的Promise。
• 支持强制刷新：通过force参数，在需要的时候可以忽略缓存和正在进行的请求，重新发起新请求。
• 去掉传入的success/error回调：让Promise的链式调用自然处理数据和错误，代码更符合Promise的设计规范，也更灵活。

这样修改后，不管两个组件同时发起多少次请求，最终只会触发一次API调用，所有组件都会在请求完成时拿到相同的数据。

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