函数返回已解决的承诺而不是数据答案

【问题标题】：Function returns resolved promise instead of data函数返回已解决的承诺而不是数据
【发布时间】：2020-05-17 06:04:52
【问题描述】：

我有这个功能：

const buildDataSource = (): Promise<Data> => {
  const data = fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((items) => items.map((item: RawDataItem, idx: number) => ({
      key: idx,
      randStr: item.title.substring(1, 24),
    })));
  return data;
};

然后用这个来称呼它：const data = buildDataSource();

但data 是一个已解决的承诺，它包含数据，而不是数据本身。我哪里错了？

【问题讨论】：

这就是异步编程在 JavaScript 中的工作方式。你必须.then你在任何地方使用它返回的Promise。
这能回答你的问题吗？ How do I return the response from an asynchronous call?
fetch 是异步的并返回promise。您应该使用then 来操作data 或考虑使用async functions
不能让异步数据同步返回。

标签： javascript reactjs typescript

【解决方案1】：

一般来说，promise 和 async 的问题是，一旦你开始使用它，你就需要将它放在堆栈的任何地方。基本上，使用你的 buildDataSource 的函数也必须是异步的等等......

另一方面，您应该明确地查看 async/await，因为它使读取异步代码变得更加容易（您的 buildDataSource 为异步）：

const buildDataSource = async (): Promise<Data> => {
  const response= await fetch('https://jsonplaceholder.typicode.com/posts');
  const items = await response.json();
  const data = items.map((item: RawDataItem, idx: number) => ({
      key: idx,
      randStr: item.title.substring(1, 24),
    }));
  return data;
}

然后像这样使用它：

const something = async () => {
   const data = await buildDataSource (); // data here is your list
}

【讨论】：