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

这是您可以使用的一种方法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);或者，如果您想返回 anobject而不是 an 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);

Answer 2

通过将其放入对象中返回多个值。像这样：const fetchExternalData = async() => {   const resp1 = await fetch('file1.txt');   const resp2 = await fetch('file2.txt');   return ({res1: resp1.text(), res2: resp2.text()});}