如何使用数组中的参数连续调用 api

Question

我有一个包含一些值的数组，这些值应该作为参数传递给 api 调用。我想用 api 调用的结果更新数据。我想每 1 秒用数组的每个值调用 api。

示例：

const people = [1, 2, 3, 4, 5];

people.forEach((person, index) => {
  setTimeout(() => {
    fetch(`https://swapi.dev/api/people/${person}/`)
      .then(res => res.json())
      .then(data => {
        // do stuff, eg : update UI
        console.log(data.name);
      })
  }, index * 1000);

});

因为我想继续调用 api 并继续更新数据或 UI，所以将 forEach() 包装在无限循环中是个好主意，如下所示：

 while(true) {
          people.forEach((person, index) => {
              setTimeout(() => {
                  fetch(`https://swapi.dev/api/people/${person}/`)
                    .then(res => res.json())
                    .then(data => {
                        // do stuff, eg : update UI
                        console.log(data.name) ;
                      })
                    }, index * 1000);

              }) ;
            } ;

如果这是个坏主意，请说明原因并建议其他正确的方法。提前致谢。

更多信息：- 我要使用的 api 的速率限制为每 5 秒调用 100 api 次，因此我必须每 3 秒调用一次以保持实时而不会达到限制。

每个数组元素都是不同的端点，因此需要完全迭代以保持数据尽可能实时。

此脚本应该运行 24/7 更新数据

星球大战 api 仅用作示例，因为这是我第一个想到的。

Answer 1

您可以通过使用 setInterval() 和 people 数组长度的间隔时间来获得所需的行为。

const people = [1, 2, 3, 4, 5];

setInterval(() => {
  people.forEach((person, index) => {
    setTimeout(() => {
      fetch(`https://swapi.dev/api/people/${person}/`)
        .then(res => res.json())
        .then(data => {
          // do stuff, eg : update UI
          console.log(data.name);
        })
     }, index * 1000);
  });
}, people.length * 1000);

但是现在您与您的服务器非常闲聊，我建议您进行批量获取，您可以一次获取所有用户而不是单独获取（并且您可以更频繁地调用以保持 ui 尽可能更新）。我假设这是你的 api，如果你愿意，你可以添加一个新功能。

const people = [1, 2, 3, 4, 5];

setInterval(() => {
  people.forEach((person, index) => {
    fetch(`https://swapi.dev/api/people/getList/`, {
         method: 'GET',
         body: JSON.stringify(people)
      })
      .then(res => res.json())
      .then(data => {
        // do stuff, eg : update UI
        console.log(data.name);
      })
  });
}, 3000);

Answer 2

最初由@Chris G

提供

这个非常棒

const people = [1, 2, 3, 4, 5];

function apiCall(person) {
      fetch(`https://swapi.dev/api/people/${person}/`)
        .then(res => res.json())
        .then(data => {
          // do stuff, eg : update UI
          console.log(data.name);
        });
        
}

people.forEach((person, index) => {

  setTimeout(() => {
        apiCall(person);
    
    setInterval(() => {
            apiCall(person);
    }, people.length * 1000);
    
  }, index * 1000);

});

只是因为我花了一些时间来理解上面的代码是如何工作的，所以我将在下面提供一些细节：

forEach 循环执行并退出，但在执行时触发了 setTimeouts，而在 setTimeouts 运行时触发了 setIntervals。所有这些实际上运行在 forEach 循环之外，但由于闭包

而能够访问变量

如何使用数组中的参数连续调用 api

How to make api call with parms from an array continously

javascript

infinite-loop