有没有办法将异步获取调用存储在变量中答案

【问题标题】：Is there a way to store async get call in a variable有没有办法将异步获取调用存储在变量中
【发布时间】：2022-01-23 23:14:00
【问题描述】：

我有一个用于 React 组件的 js 文件。我想要做的是从我的端点获取数据并将其传递给一个名为employees 的变量。我尝试了不同的方法，阅读了异步等，但我不知道该怎么做，这是我的尝试：

async function fetchData() {
    const response = await fetch('https://mocki.io/v1/29b83c0b-1a55-430d-a173-92b3632e04aa');
    const data = await response.json();
      return data
}


  export const employees =  fetchData()

如何将我的数据传递给员工变量？

【问题讨论】：

正确的做法是导出异步函数并让调用者在导入的模块中等待它。 stackoverflow.com/questions/46715484/…
你这里基本上是在导出一个promise。
无法将数据传递给员工？
你在哪里使用导出的员工？
过滤数据并显示的组件内部

标签： javascript

【解决方案1】：

您本质上是在以错误的方式思考这个问题。特别是在这个声明中：

如何将我的数据传递给员工变量？

变量是无关紧要的。您要导出的是变量引用的值。在这种情况下，该值为Promise，任何导入它的内容都需要await 即Promise。

但是在像这样导出模块的情况下，这种结构是不直观的，并且可能导致错误。模块应该只是导出功能，而消费代码可以在它选择的时间和地点调用该功能。

所以不要调用函数并导出承诺。导出函数：

export async function fetchData() {
  const response = await fetch('https://mocki.io/v1/29b83c0b-1a55-430d-a173-92b3632e04aa');
  const data = await response.json();
  return data
}

（虽然我个人建议给它起一个比 fetchData 更好的名称。考虑到所示代码中的变量 employees，fetchEmployees 之类的名称似乎更具描述性。）

然后消费代码将导入该函数并使用它来获取数据：

import { fetchData } from 'your-module';

// sometime later, either this:
const employees = await fetchData();
// do something with employees

// or this:
fetchData().then(employees => {
  // do something with employees
});

这让模块只负责一件事，为消费代码提供它需要的功能。该模块也不应该负责调用该功能，并且当该功能本质上是异步时，尝试这样做会导致问题。

【讨论】：