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

Question

I have this function:

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;
};

And call it with this: const data = buildDataSource();

but data is a resolved promise that includes the data, not the data itself. Where am I going wrong here?

Answer 1

Problem with promises and async in general is that once you start with it you need to put it everywhere up your stack. Basically the function that is consuming your buildDataSource will also have to be async and so on ...

On a different note you should definatelly look async/await because it makes reading async code much easier (your buildDataSource as async):

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;
}

And then use it like this:

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