Question

我有一个React App，从中我可以对服务器进行多个并发API调用。每个请求大约需要15到20秒才能完成。我想实现一个进度通知栏，以向用户显示完成了多少个请求。

说API是将用户添加到数据库。典型的代码如下：

var user1 = async () => await fetch('/adduser',data)
var user2 = async () => await fetch('/adduser',data)

dispatch(showloader());
Promise.allSettled([user1, user2, ...... ])
.then((r) => dispatch(hideLoader()));

我想要一些解决方案，通过该解决方案我可以获取运行时完成的请求数以更新进度条，如下所示：

.............. 3/10位用户添加了.............

谢谢。

Answer 1

您需要创建通用功能来获取用户并传递不同的数据以进行跟踪

注意：这只是简单的示例，而不是实际的可执行代码

var completed =0;

const fetchuser = data=> {
fetch('/adduser',data).then(result => {
 completed++;
dispatch(showloader(".............$completed/10 users added............")) 
 });
}
var user1 = async () => await fetchuser('/adduser',data)
var user2 = async () => await fetchuser('/adduser',data)

Promise.allSettled([user1, user2, ...... ])
.then((r) => dispatch(hideLoader()));

Answer 2

您应该改变一点逻辑。我将在下面放一个示例并对其进行一些解释...

const addUser = userData =>
  new Promise((resolve, reject) => {
    fetch("/adduser", userData)
      .then(result => {
        //dispatch complete for an promise identifier
        dispatch(completed(userData.someProp));
        resolve(result);
      })
      .catch(e => {
        dispatch(completed(userData.someProp));
        reject(e);
      });
  });

const users = [{ name: "abc", someProp: 1 }, { name: "bcd", someProp: 2 }];

//store an array with each user identifier
dispatch(start(users.map(user => user.someProp)));

Promise.allSettled(users.map(addUser)).then(r => {
  // do something with the result
  dispatch(finished(r));
});

我假设您有很多用户开始...

首先，您dispatch带有每个承诺标识符的开始操作，在上面的示例中为someProp。

在访存函数的回调中，您dispatch的另一个操作是使用标识符将其从最初存储的对象中删除。

这样，您将始终在商店中拥有一个带有承诺状态的数组，您可以始终计算array来查看剩余的数量。

LE：您需要reducer才能处理所有操作

使用Promise.allSettled并发进度通知的并发API调用

2 个答案: