如何导出由async/await方法返回的对象

Question

由于Async函数总是返回Promise，我们必须解决它才能获取其值。我需要导出它的值（返回的对象），以便我们可以在另一个模块中使用它。

export const getClient = async () => {

  return await HttpService.getValueFromSettings('durl').then((response) => {
    if(isValidResponse(response)) {
        endpoint = response.data;
        export const client = createClient(response.data);
        //This is where getting error that we can not export in side the function
      }
    }
  })
}

我需要在另一个模块中使用客户端。

我尝试在调用之前声明和初始化客户端对象，但是没有成功：

export let client = null;
export const getClient = async () => {
 return await HttpService.getValueFromSettings('durl').then((response) => {
    if(isValidResponse(response)) {
        endpoint = response.data;
        client = createClient(response.data);
        return client;
      }
    }
  })
}

- TechTurtle

---

为什么不创建一个方法并在需要的每个地方调用它呢？ - Felipe Valencia

因为我必须通过API获取数据，而我需要使用的地方显示错误，因为它们无法等待方法返回结果。 - TechTurtle

Answer 1

我相信你无法直接做到你想要的。相反，你应该只导出getClient()函数本身，并在需要客户端时调用它。

import { getClient } from './myfile';

getClient().then(client => { someOtherFunction(client); });

import 和 export 是同步进行的，因此您无法将它们与异步函数混合使用。

您第二个示例中的问题在于您将 client = null。然后，当您稍后将其设置为对象时，您正在将该变量设置为一个对象，但是您在导出时导出了 client 的值

- samanime

---

@TechTurtle 在这种情况下，你的问题无法解决，因为你试图将异步代码转换为同步运行。 - robertklep

@TechTurtle 如果是这样的话，你需要重新设计并可能将那些其他东西也包装成 Promise。JavaScript 没有强制异步代码同步执行的机制（除了做一些非常丑陋的事情，比如强制循环，但这会在执行时冻结整个窗口）。await 和 async 实际上只是 Promise 的语法糖。它们没有提供任何根本上的新功能。 - samanime

@Marklar，您可以将值设置为其范围内的任何变量，包括顶级文件变量。因此是的，您只需要确保在尝试使用它之前已经解决了承诺或者还没有解决（通常只需检查它是否为null/undefined即可）。 - samanime

@samanime，感谢您抽出时间回复。例如，在.then中，我们可以使用ourTopLevelVar = someResult，然后我们有一个名为OurClass的类，其中包含方法ourMethod，在该方法中，我们会这样做:if (ourTopLevelVar) {} else {}。如果没有解决，那么我们是否仍需要再次调用函数并等待它再次解决？所以代码（等待）仍然需要存在于每个方法中吗？我不希望您为我搜索，但我很难找到这方面的例子，您知道任何涵盖此内容的文章吗？ - Marklar

@Marklar 是的，如果没有解决，你需要每次都调用 ourMethod() 直到它被解决。你可以在 else 中使用 setTimeout() 在 x 秒后再次尝试，或者根据你的设置直接在 .then() 中调用它。 - samanime

Answer 2

现代浏览器中使用顶级等待现在已经成为可能。请务必在示例下面的表格中检查浏览器支持情况。

以下是一个使用MDN的fetch的简单示例：

const colors = fetch('../data/colors.json')
  .then(response => response.json());

export default await colors;

原始脚本可以像下面这样编写，并且按照操作员的意图工作：

const client = HttpService.getValueFromSettings('durl').then((response) => {
  if(isValidResponse(response)) {
    return createClient(response.data);
  }
  return null;
};

export default await client;

- bergy

---

尽管 VS Code 警告我 await 对 export 没有影响，但它确实有用...谢谢！ - Hernán Garcia