javascript - 在多个函数中等待相同的 API 调用

Question

我有一个 API 调用，希望在一个函数中调用该调用，但在不同的回调中等待。

例如我想在加载时发出 GET 请求，以便数据尽快可用，但我需要一个“提交”函数来等待 GET 请求，以便在数据可用之前它不会触发。

这是由于我在 2 个异步函数之间存在竞争条件，根据 API 响应时间，可能比具有控制逻辑的身份验证回调花费更多或更少的时间。

我宁愿同时执行这两个调用，以便它在任何情况下都可以尽可能快地运行。我知道这会产生更高的成本，因为数据可能不会被使用，但在初始连接时每个 session 只执行一次，因此加载时间的潜在减少值得额外的潜在额外 API 调用。

也就是说，这就是我目前正在做的事情:

  let initialized = false;
  let dataError = null;
  let dataWaiters = [];
  const dataLoaded = () => new Promise(( resolve, reject ) => {
    if ( initialized ) resolve();
    if ( dataError ) reject( dataError );
    dataWaiters.push({ resolve, reject });
  });

这允许我让我的 axios 在加载时获取请求，然后它将解决 dataWaiters 中的任何/所有 promise 。

async onStart () {
  // Attempt to use a local copy if we can
  if ( session.has.token.already ) {
    loadFromCache();
    return;
  }

  // Else we need to get data from API server
  try {
    const { data } = await axios.get('https://my-api-server/api/temp-token');
    saveResposne( data );
    this.initialized = true;
    dataWaiters.forEach( waiter => waiter.resolve() );
  } catch ( err ) {
    dataError = err;
    dataWaiters.forEach( waiter => waiter.reject(err) );
  }
}

然后在另一个回调函数中，我可以简单地使用 await dataLoaded() 来延迟执行，直到该请求完成。

async onSomeCallback( data ) {
  if ( useTempToken ) {
    await dataLoaded();
    // use token...
  else {
    // use data...
  }
}

这可行，但我觉得应该有一种方法可以更好地使用 axios.get promise ，并且可能使用更少的“全局”变量。有没有办法可以更优雅地处理这个问题？

Answer 1

这是这个工作的例子，非常简单。我们声明一个新事件。然后我们的数据加载器在准备好后进行调度。我们有一个触发两个操作的事件监听器。

const data = [];

const dataReady = new CustomEvent('DataReady', {
  bubbles: true,
  detail: data
});

const populateData = () => {   
  setTimeout(() => {
    for(i = 0; i< 10; i++) data.push(i);
    console.log('test2');
    document.dispatchEvent(dataReady);
  }, 3000);
};

document.addEventListener('DataReady', ({ detail }) => {
  console.log(detail);
});

document.addEventListener('DataReady', ({ detail }) => {
  console.log(`Array length: ${detail.length}`);
});

populateData();
console.log('Test');