在所有其他承诺之前等待 1 个承诺

Question

提前为这个模棱两可的标题道歉。

为了更好地解释这个问题 - 我在 fetch-form-data.js 中有两个函数，看起来像......

let cachedBaseUrl;

const getBaseUrl = () => {
  if (cachedBaseUrl) return Promise.resolve(cachedBaseUrl)

  return fetch('https://some-baseurl-endpoint.com')
    .then(baseUrl => {
      cachedBaseUrl = baseUrl
      return baseUrl
    });
}

const getFormData = formId =>
  getBaseUrl()
    .then(baseUrl => fetch('https://form-data-endpoint.com'))

module.exports = {
  getFormData
}

getFormData 被导出并在其他地方循环调用数百次。问题是getFormData 依赖于getBaseUrl，所以调用getFormData 数百次也调用getBaseUrl 数百次，这经常出错，因为我猜baseUrl 端点不喜欢这么快被击中。

我想确保getBaseUrl 只被击中一次，并让所有后续getFormData 对getBaseUrl 的调用“等待”在继续之前解决。

一种解决方案是在使用getFormData 的地方同时导出getBaseUrl 和getFormData，等待getBaseUrl，然后根据需要多次调用getFormData。有点像...

async () => {
  const baseUrl = await getBaseUrl();
  const formData = [];

  for (let form of forms) {
    formData.push(getFormData(form));
  }

  await Promise.all(formData);
  ...
}

但是，getFormData 的使用分布在整个代码库中。像当前实现一样简单地抽象出getBaseUrl 并只公开getFormData 会很好，但要解决“等待”所有后续getFormData 调用的问题，直到至少第一个getBaseUrl 调用得到解决。

我的微弱尝试是缓存 baseUrl，如上面的代码块所示，但这并不会立即“停止”随后的 getBaseUrl 调用发生，它会调用另一个 fetch，因为尚未缓存任何内容。

我将如何实施这样的事情？

Answer 1

试试这个

let cachedBaseUrl;
const getBaseUrl = () => {
  if (cachedBaseUrl) return cachedBaseUrl
  return cachedBaseUrl = new Promise((resolve, reject) =>
      fetch('https://some-baseurl-endpoint.com')
          .then(BaseUrl => { cachedBaseUrl = undefined; resolve(BaseUrl) })
          .catch(() => { cachedBaseUrl = undefined; reject() })
  );
}

您需要在第一个请求完成之前阻止getBaseUrl() 发送其他请求。所以你需要一个那个请求的Promise，而不是Promise.resolve(constant)。

请求完成后，您将其结果设置为resolve/reject 并重置cachedBaseUrl，这样您就可以传递if 并重试。

重置逻辑由您决定。您可以不断地但按顺序获取baseurl-endpoint（就像现在所做的那样），或者不时地，那么您将不得不调用SetTimeout(interval, () => cachedBaseUrl = undefined) 而不仅仅是cachedBaseUrl = undefined。或者做任何你喜欢的事情。

Answer 2

也只需缓存你的承诺。

let cachedBaseUrl, cachedPromise;

const getBaseUrl = () => {
  if (cachedBaseUrl) return Promise.resolve(cachedBaseUrl)
  if (cachedPromise) return cachedPromise;

  cachedPromise = fetch('https://some-baseurl-endpoint.com')
    .then(baseUrl => {
      cachedBaseUrl = baseUrl
      return baseUrl
    });

  return cachedPromise;
}

const getFormData = formId =>
  getBaseUrl()
    .then(baseUrl => fetch('https://form-data-endpoint.com'))

module.exports = {
  getFormData
}

Answer 3

您的缓存解决方案是一个好的开始，通过缓存待处理的承诺，我认为它可以优雅地解决问题。

let cachedBaseUrl;

const getBaseUrl = () => {
  if (cachedBaseUrl) return Promise.resolve(cachedBaseUrl)
  return cachedBaseUrl = fetch('https://some-baseurl-endpoint.com');
}

const getFormData = formId =>
  getBaseUrl()
    .then(baseUrl => fetch('https://form-data-endpoint.com'))

module.exports = {
  getFormData
}

Answer 4

致电getBaseUrl() 一次并保存您从中获得的承诺。然后在 getFormData() 中，调用 then 以保存已保存的承诺。

const getBaseUrl = () => ...

const baseUrlPromise = getBaseUrl()

const getFormData = formId =>
  baseUrlPromise
    .then(...)

在一个promise上多次使用.then(...)可以做出多个依赖它的promise。

如果没有其他使用cachedBaseUrl，您可以将其删除，因为解析后的值将保存为baseUrlPromise 的一部分。