Question

我正在创建一个应用程序，在一个页面中，我有两个组件请求相同的http资源。在这种情况下，我使用的是axios，这是一个例子：

axios.get('/api/shift/type')
        .then(
            (response) => {
                self.shiftTypes = response.data;
                success(response.data)
            },
            (response) => {
                error(response)
            }
        );

问题在于他们几乎同时要求它。如果组件A与组件B同时发出请求，则会发出2个请求调用，并且它们将获得相同的数据。有没有办法检查axios当前是否有未解决的承诺，并在请求解决后将结果返回给两个组件？

不确定它是否有帮助，但是使用vue框架构建应用程序

由于

编辑：我尝试将诺言存储在内存中，但组件B永远不会得到响应

getShiftTypes(success, error = this.handleError, force = false) {
    if (this.shiftTypes && !force) {
        return Promise.resolve(this.shiftTypes);
    }

    if (this.getShiftTypesPromise instanceof Promise && !force) { return this.getShiftTypesPromise; }

    let self = this;
    this.getShiftTypesPromise = axios.get('/api/shift/type')
        .then(
            (response) => {
                self.shiftTypes = response.data;
                self.getShiftTypesPromise = null;
                success(response.data)
            },
            (response) => {
                error(response)
            }
        );
    return this.getShiftTypesPromise;
}

Answer 1

考虑使用缓存：

let types = { lastFetchedMs: 0, data: [] }

async function getTypes() {

  const now = Date.now();

  // If the cache is more than 10 seconds old
  if(types.lastFetchedMs <= now - 10000) {
    types.lastFetchedMs = now;
    types.data = await axios.get('/api/shift/type');
  }

  return types.data;
}

while(types.data.length === 0) {
  await getTypes();
}

Axios - 对同一资源的多个请求

1 个答案: