JS fetch API: How to fetch content from multiple files with one async function?

Question

I would like to fetch data from multiple files with a single async function. Currently my code is like this:

const fetchExternalData = async() => {
   const resp1 = await fetch('file1.txt');
   const resp2 = await fetch('file2.txt');
   return resp1.text(); // How could I return the content from file2.txt as well?
}

fetchExternalData().then((response) => {
  console.log(response); // Data from file1.txt
  // How could I access the data from file2.txt?
}

This way, I can work with the data from the first file, but how could I access the data from more files this way? Hope the question is understandable. Any help will be greatly appreciated.

Return an array of results: return [resp1.text() , resp2.text()] then use Promise.all() to wait on them — slebetman
– slebetman, Commented Jul 1, 2020 at 10:42

goto · Accepted Answer · 2020-07-01 13:43:43Z

3

Here's one way you could go about this using Promise.all:

const fetchExternalData = () => {
  return Promise.all([
    fetch("file1.txt"),
    fetch("file2.txt")
  ])
  .then(
    results => Promise.all(
      results.map(result => result.text())
    )
  )
}

Then, when calling your fetchExternalData function, you will get an array of items with data from both of your files:

fetchExternalData().then(
  (response) => {
    // [file1data, file2data]
  }
)

Here's an example:

const fetchExternalData = () => {
  return Promise.all([
    fetch("https://jsonplaceholder.typicode.com/todos/1"),
    fetch("https://jsonplaceholder.typicode.com/todos/2")
  ]).then(results => {
    return Promise.all(results.map(result => result.json()));
  });
};

fetchExternalData()
  .then(result => {
    // console.log(result);
  })
  .catch(console.error);

Alternatively, if you'd want to return an object instead of an array, you could do something like the following:

const fetchExternalData = items => {
  return Promise.all(
    items.map(item =>
      fetch(`https://jsonplaceholder.typicode.com/todos/${item.id}`)
    )
  )
  .then(
    responses => Promise.all(
      responses.map(response => response.json())
    )
  )
  // use `Array.reduce` to map your responses to appropriate keys
  .then(results =>
    results.reduce((acc, result, idx) => {
      const key = items[idx].key;
      
      // use destructing assignment to add 
      // a new key/value pair to the final object
      return {
        ...acc,
        [key]: result
      };
    }, {})
  );
};

fetchExternalData([
  { id: 1, key: "todo1" }, 
  { id: 2, key: "todo2" }
])
  .then(result => {
    console.log("result", result);
    console.log('todo1', result["todo1"]);
  })
  .catch(console.error);

References:

edited Jul 1, 2020 at 13:43

answered Jul 1, 2020 at 10:55

goto

4,44517 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Martin Hinze Over a year ago

Thank you very much! This works, I can access the result array with result[0]. Is there a way to add keys to the result array, so I could access it with result['key1']?

goto Over a year ago

@martin-hinze so you mean returning an object? See the edit

goto Over a year ago

@martin-hinze and keys no, but you could just return an object like in my second example, or you could return an array of objects with the key that you want and you'd have to use the Array.find method to find the appropriate item, you wouldn't be able to do result["key1"] like you want it though

Martin Hinze Over a year ago

Thank you for the edit, this is more than I was hoping for. I will study your code meticulously and learn a lot from it!

goto Over a year ago

@martin-hinze let me know if there are any questions or if there's a part that you don't understand, I will edit the question and provide more comments

Night King · Accepted Answer · 2020-07-01 10:53:52Z

1

return multiple values by putting it in an object. like this:

const fetchExternalData = async() => {
   const resp1 = await fetch('file1.txt');
   const resp2 = await fetch('file2.txt');
   return ({res1: resp1.text(), res2: resp2.text()});
}

answered Jul 1, 2020 at 10:53

Night King

4654 silver badges12 bronze badges

2 Comments

Martin Hinze Over a year ago

Thank you for your support! I chose the answer from @goto1, because it is more flexible, but your's is helpful, too!

goto Over a year ago

By the way, resp1.text() will return a Promise, so you'd need to do something like obj.rest1.then(...) to get the value that this Promise resolves with.

Collectives™ on Stack Overflow

JS fetch API: How to fetch content from multiple files with one async function?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related