Javascript React.JS=Promise/Fetch API有重复的代码,如何将其绑定到自己的函数中

Javascript React.JS=Promise/Fetch API有重复的代码,如何将其绑定到自己的函数中,javascript,reactjs,optimization,promise,fetch-api,Javascript,Reactjs,Optimization,Promise,Fetch Api,我正在React.JS中编写一个小程序。我使用Promise和FetchAPI从多个文本文件中获取内容。我遇到了一个问题——我的许多函数都有完全相同的开始部分,即调用API,然后将数据保存到数组中。唯一不同的部分是我如何操作每个函数中的数组。我一直在试图找出如何将每个函数的第一部分提取到它自己的函数中,以避免重复 但我的问题是,如何使数组全局化,以便可以在其他函数中访问它们 以下是我的两项职能——欢迎提出任何建议 App.js getFirstFunc = async (e) => {

我正在React.JS中编写一个小程序。我使用Promise和FetchAPI从多个文本文件中获取内容。我遇到了一个问题——我的许多函数都有完全相同的开始部分,即调用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
          }
        }
      })
    }

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

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
});
根据上面的代码,如果您希望使结果可访问地超出承诺范围,以便稍后在脚本中进行进一步处理,则可以在承诺之前声明一个变量,在回调中修改该变量并解析承诺

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

firstFile和secondFile在getFirstFunc和getSecondFunc中的路径完全相同吗?@Tony是的,路径完全相同!如何使数组全局化这不是从异步调用返回响应的正确方法。另外,为什么函数是异步的?他们没有等待任何东西,也没有等待任何东西returned@CertainPerformance嗯,我明白了。我是React.js的新手,在网上学习了一个使用async并等待调用JSON API的教程,我只是在重用代码。但是谢谢你的提示,这里其实不需要。