JS fetch API：如何使用一个异步函数从多个文件中获取内容？

Question

我想使用一个异步函数从多个文件中获取数据。目前我的代码是这样的：

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

通过这种方式，我可以使用第一个文件中的数据，但是我如何才能通过这种方式访问更多文件中的数据呢？希望这个问题是可以理解的。任何帮助将不胜感激。

Answer 1

return 将多个值放在一个对象中。像这样：

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

Answer 2

这里有一种方法可以使用 Promise.all:

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

然后，当调用您的 fetchExternalData 函数时，您将获得包含两个文件数据的项目数组：

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

这是一个例子：

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

或者，如果您想要 return object 而不是 array，您可以执行如下操作：

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

参考文献：

JS fetch API：如何使用一个异步函数从多个文件中获取内容？

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

javascript

asynchronous

fetch-api