Question

我有一个API调用，想在一个函数中调用，但在另一个回调中等待。

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

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

我宁愿同时执行两个调用，以便在任何情况下都可以尽可能快地运行。我知道这样做的成本较高，因为可能无法使用数据，但是在初始连接时每个会话只能执行一次，因此，潜在的加载时间减少值得额外的潜在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中的所有诺言。

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，也许可以使用更少的'global'变量。有什么办法可以让我更优雅地处理吗？

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');

等待多个功能的同一API调用

1 个答案: