时间戳

首页 > 解决方案 > 有没有办法等待传递给函数的数据，以便等待的数据可用于导出/导入？

javascript - 有没有办法等待传递给函数的数据，以便等待的数据可用于导出/导入？

问题描述

我想从后端异步加载数据，并将一些参数应用到一个 thunk 中，以便可以将 memoized 函数导入我的代码的其他区域。因为当前不允许在顶层等待，所以我迫不及待地将值传递给导出的函数。

例如，我有这个功能：

const aFunction = (someData) => (props) => {
  // do stuff
}

const someDataFromApi = await getData(); // <-- will not work: top level await not allowed 

const appliedAFunction = aFunction(someDataFromApi);

export { appliedAFunction, aFunction};

然后我会在任何地方都可以随时导入应用的功能（或者当然也可以使用未应用的版本）：

import {appliedAFunction, aFunction} from './aFunction'

const cProcess = () => {
  const props = { a: 'foo' };
  appliedAFunction(props)
}

const dProcess = async () => j
  const data = await getData();
  const props = {b: 'bar'};
  aFunction(data)(props)
}

是否有一种接受/推荐的方式来异步应用参数，以便其可用于导出/导入？

标签： javascriptasync-awaitexportcurrying

解决方案

这是我想出的解决方案，它允许我导出已通过承诺值的函数。它与在顶层等待的答案不同，但它的工作原理相同，允许传递和存储异步检索的值，以便在调用导出函数时可用。

这个函数允许我预加载 Promise 作为参数，这意味着我可以在 Promise 解析之前导出函数。

const passToThunkPromiseAsArg = (func: Function) => (
  promise: Promise<any>
) => {
  return (...args) => {
    return promise
      .then((resolvedValue) => {
        return func(resolvedValue)(...args);
      })
      .catch((e) => {
        // you might want to resolve errors differently
        return func(null)(...args);
      });
  };
};

例子

在导出之前，我向函数传递了一个值的承诺，而不是一个值：

// ...
const promiseOfValue: Promise<any> = extremelySlowCalculation();
const appliedAFunction = passToThunkPromiseAsArg(aFunction)(promiseOfValue);

export default {aFunction, appliedAFunction}

然后在其他文件中，我可以调用并等待或 Promise.then appliedAFunction：

import {appliedAFunction} from './aFunction'

const cProcess = async () => {
  const props = { a: 'foo' };
  const b = await appliedAFunction(props)
}

到cProcess调用时，promise 很可能已经解决，因此在大多数情况下，获取已解决的值appliedAFunction并没有实际延迟。b在极少数情况下它没有被解决，该函数将等待该值。

推荐阅读