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

Posted 2023-02-27

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

【英文标题】：JS fetch API: How to fetch content from multiple files with one async function?

【发布时间】：2020-10-21 18:52:06

【问题描述】：

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

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?

这样，我可以处理第一个文件中的数据，但我怎么能以这种方式访问​​更多文件中的数据呢？希望这个问题可以理解。任何帮助将不胜感激。

【问题讨论】：

返回结果数组：return [resp1.text() , resp2.text()] 然后使用Promise.all() 等待它们

@slebetman 不在 cmets 中回答问题

【参考方案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);

或者，如果您想返回 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);

参考资料：

Promise.all - MDN Array.reduce - MDN Destructing assignment - MDN

【讨论】：

非常感谢！这行得通，我可以使用result[0] 访问结果数组。有没有办法向结果数组添加键，所以我可以使用result['key1'] 访问它？

@martin-hinze 所以你的意思是返回一个对象？查看编辑

@martin-hinze and keys no，但是你可以像我的第二个例子一样返回一个object，或者你可以返回一个带有你想要的键的对象数组，你会拥有要使用 Array.find 方法找到合适的项目，你将无法像你想要的那样做 result["key1"]

感谢您的编辑，这超出了我的预期。我会仔细研究你的代码，从中学到很多东西！

@martin-hinze 如果有任何问题或有不明白的部分，请告诉我，我会编辑问题并提供更多 cmets

【参考方案2】：

通过将多个值放入一个对象中来返回多个值。像这样：

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

【讨论】：

感谢您的支持！我选择了@goto1 的答案，因为它更灵活，但你的也很有帮助！

顺便说一下，resp1.text() 将返回一个Promise，因此您需要执行obj.rest1.then(...) 之类的操作来获取此Promise 解析的值。