React.JS = Promise/Fetch API 有重复代码，我如何捆绑到自己的函数中答案

【问题标题】：React.JS = Promise/Fetch API has repetitive code, how can I bundle into its own functionReact.JS = Promise/Fetch API 有重复代码，我如何捆绑到自己的函数中
【发布时间】：2018-10-29 11:44:26
【问题描述】：

我正在用 React.JS 开发一个小程序。我正在使用 Promise 和 Fetch API 从多个文本文件中获取内容。我遇到了一个问题——我的很多函数都有完全相同的开始部分，即调用 API，然后将数据保存到数组中。唯一不同的部分是我如何操作每个函数中的数组。我一直在试图弄清楚如何将每个函数的第一部分提取到自己的函数中，以避免重复。

但我的问题是，如何使数组成为全局数组，以便在其他函数中访问它们？

这是我的两个功能——欢迎提出任何建议。

App.js

getFirstFunc = async (e) => { 
  Promise.all([
    fetch(firstFile).then(x => x.text()),
    fetch(secondFile).then(x => x.text())
    ]).then(allResponses => {
      let firstArray = allResponses[0];
      let secondArray = allResponses[1];
      let results = []
      for (let i = 0; i < firstArray.length; i++) {
        for (let j = 0; j < secondArray.length; j++ ) {
          // code for first function
          }
        }
      })
    }
  getSecondFunc = async (e) => {
    Promise.all([
    fetch(firstFile).then(x => x.text()),
    fetch(secondFile).then(x => x.text())
    ]).then(allResponses => {
      let firstArray = allResponses[0];
      let secondArray = allResponses[1];
      let results = []
      for (let i = 0; i < firstArray.length; i++) {
        for (let j = 0; j < secondArray.length; j++ ) {
          // code for second function
          }
        }
      })
    }

【问题讨论】：

firstFile 和 secondFile 在 getFirstFunc 和 getSecondFunc 中的路径完全相同吗？
@Tony 是的，完全相同的路径！
how can I make the arrays global 这不是从异步调用返回响应的正确方法
另外，为什么函数async？他们没有awaiting 任何东西，也没有任何东西被退回
@CertainPerformance 嗯，我明白了。我真的是 React.js 的新手，并且正在关注使用 async 和 await 调用 JSON API 的在线教程，我只是重用了该代码。但是感谢您提供的提示，这里并不真正需要它。

标签： javascript reactjs optimization promise fetch-api

【解决方案1】：

这意味着对于两个 Promise 的文件处理应该不同，您可以创建一个函数，该函数接受一个执行您想要完成的处理的函数并返回一个执行该 Promise 的函数。这听起来令人困惑，但我不认为这样做的代码太糟糕了。

makeGetFunc = function (processingFunction) {
  return (e) => { 
    Promise.all([
      fetch(firstFile).then(x => x.text()),
      fetch(secondFile).then(x => x.text())
    ]).then(allResponses => {
      let firstArray = allResponses[0];
      let secondArray = allResponses[1];
      let results = []
      for (let i = 0; i < firstArray.length; i++) {
        for (let j = 0; j < secondArray.length; j++ ) {
          processingFunction(firstArray[i], secondArray[j]);
        }
      }
    })
  }
}
getFunc1 = makeGetFunc(function (a, b) {
  // code for first function
});
getFunc2 = makeGetFunc(function (a, b) {
  // code for second function
});

给定上面的代码，如果你想让结果在promise之外，以便在脚本后面做进一步的处理，你可以在promise之前声明一个变量，在回调中修改变量并解析promise .

let results = []; 
Promise.all([
  fetch(firstFile).then(x => x.text()),
  fetch(secondFile).then(x => x.text())
]).then(allResponses => {
  let firstArray = allResponses[0];
  let secondArray = allResponses[1];
  for (let i = 0; i < firstArray.length; i++) {
    for (let j = 0; j < secondArray.length; j++ ) {
      results.push([firstArray[i], secondArray[j]]);
    }
  }
}).resolve()

【讨论】：