Question

我有一个获取数据的功能。但是如何使此功能更通用？例如，否则参数的数量将发生变化。

var url = [
  'http://www.json-generator.com/api/json/get/cevhxOsZnS',
  'http://www.json-generator.com/api/json/get/cguaPsRxAi',
  'http://www.json-generator.com/api/json/get/cfDZdmxnDm'
]

fetchData(...url)

function fetchData(a, b, c) {
  var arr = [];
  fetch(a)
    .then(res => res.json())
    .then(res => {
      arr.push(res)
      return fetch(b)
    })
    .then(res => res.json())
    .then(res => {
      arr.push(res)
      return fetch(c)
    })
    .then(res => res.json())
    .then(res => arr.push(res))
    .then(res => console.log(arr))
}

Answer 1

通过查看您的代码，我假设fetch是一个将URL作为输入并返回Promise的函数。

您可以利用javascript中的arguments关键字包含调用函数的所有参数的事实，并使递归函数执行您想要的操作。

示例代码如下：

var url = [
  'http://www.json-generator.com/api/json/get/cevhxOsZnS',
  'http://www.json-generator.com/api/json/get/cguaPsRxAi',
  'http://www.json-generator.com/api/json/get/cfDZdmxnDm'
]

fetchData(...url)

function fetchData() {
  var arr = [];
  fetchRecursive(arguments, arr);
}

function fetchRecursive (args, arr, i = 0) {
  if (i < args.length - 1) {
    return fetch(args[i])
      .then(res => res.json())
      .then(res => {
        arr.push(res);
        return fetchRecursive(args[++i]);
      });
  } else {
    return fetch(args[i])
      .then(res => res.json())
      .then(res => {
        arr.push(res);
        console.log(arr);
      });
  }
}

Answer 2

这是另一个带有生成器和异步/等待的解决方案。

var url = [
  'http://www.json-generator.com/api/json/get/cevhxOsZnS',
  'http://www.json-generator.com/api/json/get/cguaPsRxAi',
  'http://www.json-generator.com/api/json/get/cfDZdmxnDm'
];


function* fetchData(urls) {
  var result = [];
  for (someUrl of urls) {
    console.log("Fetching ", someUrl);
    yield new Promise((resolve) => {
      fetch(someUrl).then(res => {
        res.json().then(res => {
          result.push(res);
          resolve();
        });
      })
    });
  }
  return result;
}

async function asyncCall() {
  var iterator, iteration;
  iterator = fetchData(url);

  do {
    iteration = iterator.next();
    await iteration.value;
  } while (!iteration.done);

  console.log("done ", iteration.value);
}

asyncCall();

在JS中，在更多大学中修改功能

2 个答案: