前端发起请求后组件队列操作问题？

  • Z时代
  • 2024-02-08
  • 分类：IT

问题场景：

某个页面加载后会同时发起多个异步请求，每次请求before调用开启loading组件，在请求complete时error或success时会调用关闭loading组件，在请求error时会调用开启toast组件，toast组件通过定时器3s秒关闭。

请问如何做到：

1.loading组件状态统一控制，比如A接口请求开启，B接口请求已经开启，B接口请求响应A接口请求未响应不关闭loading。
2.多次请求error仅显示一条toast，或有一条请求调用toast后关闭其他请求操作。

不限语言，不限组件方案，求各位前端大佬答疑解惑。

回答：

1、计数器，计数器初始为0，每次开启loading的时候计数器+1，计数器大于0时显示loading，每次关闭loading的时候计数器-1，计数器<=0时隐藏loading
2、什么叫关闭其他请求操作

回答：

大概会这么设计

loading();
Promise.all([request('A'), request('B'), request('C')]).catch(() => toast({duration: 3000})).finally(removeLoading)

回答：

let loadingCount = 0;
function startRequest() {
  loadingCount++;
  if (loadingCount === 1) {
    // 开启 loading 组件
  }
}
function endRequest() {
  loadingCount--;
  if (loadingCount === 0) {
    // 关闭 loading 组件
  }
}
let isToastShown = false;
function showError() {
  if (!isToastShown) {
    isToastShown = true;
    // 显示 toast 组件
    setTimeout(() => {
      // 关闭 toast 组件
      isToastShown = false;
    }, 3000);
  }
}

回答：

  1. 用 Promise.all

假设你有三个异步任务A、B、C，它们的返回值都是一个promise，showLoadEvt()是显示loading，hideLoadEvt()是隐藏loading。

伪代码类似以下：

showLoadEvt();
const promiseArr = [A, B, C];
Promise.all(promiseArr)
// 当所有异步任务都成功
.then(resultArr => {
  // resultArr是每个接口成功返回的数据
  hideLoadEvt();
})
// 只要有一个异步任务异常
.catch(err => {
  // err 失败的那个异步任务的返回值
});
  1. 用async await。
    假设条件同上
try {
    showLoadEvt();
    const resultA = await A();
    const resultB = await B();
    const resultC = await C();
    hideLoadEvt();
} 
catch (err) {
    hideLoadEvt();
}

以上是 前端发起请求后组件队列操作问题？ 的全部内容， 来源链接： utcz.com/p/934626.html

回到顶部