【解决方案】Vue3多组件异步任务队列

最新推荐文章于 2024-05-14 11:29:59 发布
最新推荐文章于 2024-05-14 11:29:59 发布
阅读量803 收藏 2
点赞数 1
文章标签： 队列 vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48721669/article/details/118957916
版权

关于 Vue3 和 mitt.js 的使用方法我在另一篇文章中有介绍

整理的一些Vue3知识点（550+👍）

需求介绍

最近公司有个需求，是一个移动端页面。一个页面包含多个楼层，每个楼层是一个单独的组件。每个组件内部有自己的逻辑。

微信截图_20210707080035.png

页面是类似于个人中心的福利页面，每个楼层展示对应礼包的图片，用户进入页面以后，在满足条件的前提下，自动弹出领取礼包的弹窗。

微信截图_20210707080549.png

控制每个礼包的弹窗显示隐藏的状态分别写在各自的组件中，现在的需求是

💡 每次只能展示一个弹窗

💡 无论点击确认还是取消，关闭上一个弹窗之后，自动打开第二个弹窗

💡 可以控制弹窗展示的顺序

微信截图_20210707083400.png

解决方案

技术栈

  • Vue3
  • mitt.js
  • Promise

思路

每个弹窗都视为一个异步任务，按预设顺序构建一个任务队列，然后通过点击按钮手动改变当前异步任务的状态，进入到下一个异步任务。

步骤一

先写两个组件模拟一下实际情况

父组件(页面组件)

<template>
  <div>
    <h1>我是父组件!</h1>
    <child-one></child-one>
    <child-two></child-two>
    
    <div class="popup"
     v-if="showPopp">
      <h1>我是父组件弹窗</h1>
    </div>
  </div>
  
</template>
<script>
import { defineComponent } from 'vue'

import ChildOne from './components/Child1.vue'
import ChildTwo from './components/Child2.vue'

export default defineComponent({
  name: '',
  components: {
    ChildOne,
    ChildTwo,
  },
  setup() {
    //控制弹窗显示
    const showPopp = ref(false)
    return {
      showPopp,
    }
  },
})
</script>

子组件一

<template>
    <div>
      我是楼层一
    </div>

    <div class="popup"
       v-if="showPopp">
        <h3>我是弹窗一</h3>
        <div>
          <button @click='cancle'>取消</button>
          <button @click='confirm'>确定</button>
        </div>
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue'


export default defineComponent({
  name: '',
  setup() {
    //控制弹窗显示
    const showPopp = ref(false)
    //取消的逻辑
    const cancle = () => {
      showPopp.value = false
      //do something
    }
    //确认的逻辑
    const confirm = () => {
      showPopp.value = false
      //do something
    }
    return {
      showPopp,
      cancle,
      confirm,
    }
  },
})
</script>

子组件二

跟子组件一基本一样，这里操作弹窗的逻辑是一模一样的，其实应该把逻辑提取到一个 hook 里，这里为了方便演示，就直接写了。

<template>
    <div>
      我是楼层二
    </div>
    
    <div class="popup"
       v-if="showPopp">
        <h3>我是弹窗二</h3>
        <div>
          <button @click='cancle'>取消</button>
          <button @click='confirm'>确定</button>
        </div>
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue'


export default defineComponent({
  name: '',
  setup() {
    //控制弹窗显示
    const showPopp = ref(false)
    //取消的逻辑
    const cancle = () => {
      showPopp.value = false
      //do something
    }
    //确认的逻辑
    const confirm = () => {
      showPopp.value = false
      //do something
    }
    return {
      showPopp,
      cancle,
      confirm,
    }
  },
})
</script>

结果如下图

微信截图_20210707085736.png

步骤二

我们先不使用弹窗，我们通过定时器和 console.log 来模拟异步任务

父组件

//省略部分上文出现过的代码
setup() {
    .......
    //父组件要单独处理的异步任务
    const taskC = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('父组件的异步任务')
        }, 1000)
      })
    }
    
    onMounted(() => {
      taskC()
    })
    ......
  },

子组件一

//省略部分上文出现过的代码
setup() {
    .......
    const taskA = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('子组件一的异步任务')
        }, 1000)
      })
    }
    onBeforeMount(() => {
      taskA()
    })
    ......
  },

子组件二

//省略部分上文出现过的代码
setup() {
    .......
    const taskB = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('子组件二的异步任务')
        }, 1000)
      })
    }
    onBeforeMount(() => {
      taskB()
    })
    ......
},

看一下结果,因为还没有构建任务队列，所有的异步任务都是同时进行的，所以同时打印出了三个组件的 log

16.gif

步骤三

使用 mitt.js 来收集异步任务

先把 mitt.js 封装成一个工具函数

//mitt.js
import mitt from 'mitt'
const emitter = mitt();

export default emitter;

在子组件挂载之前触发 add-async-tasts 事件，通知父组件收集异步任务，在父组件监听 add-async-tasts 事件,将子组件的任务存入数组中。

父组件

//省略部分上文出现过的代码
setup() {
    .......
    // 声明一个空数组  用来存放所有的异步任务
    let asyncTasks = []
    
    //向数组中添加异步任务 收集所有的异步任务
    const addAsyncTasts = (item) => {
      asyncTasks.push(item)
      console.log('🚀🚀~ asyncTasks:', asyncTasks)
    }
    
    // 监听add-async-tasts事件,当有异步任务触发的时候把异步任务添加到数组中
    emitter.on('add-async-tasts', addAsyncTasts)
    
    // 组件卸载的时候移除监听事件,数组重置为空
    onUnmounted(() => {
      emitter.off('add-async-tasts', addAsyncTasts)
      asyncTasks = []
    })
    .......

子组件一

//省略部分上文出现过的代码
setup() {
    .......
    onBeforeMount(() => {
      //条件判断 if...  此处满足条件将通知父组件收集任务
      emitter.emit('add-async-tasts', taskA)
    })
    .......

子组件二

//省略部分上文出现过的代码
setup() {
    .......
    onBeforeMount(() => {
      //条件判断 if...  此处满足条件将通知父组件收集任务
      emitter.emit('add-async-tasts', taskB)
    })
    .......

看一下结果，我在父组件的收集函数中打了 log ，可以看见是触发了两次收集函数

1.gif

点开看一下，可以看到里面有两条数据，分别是 taskA 和 taskB 。说明我们的任务已经收集起来了。

image.png

步骤四

自定义任务顺序

这个我实现的方式是在收集任务的时候，多传入一个数字参数，最后再把任务队列按照数字大小排序。

父组件

//省略部分上文出现过的代码
setup() {
    .......
    //排序函数
    const compare = (property) => {
      return (a, b) => {
        let value1 = a[property]
        let value2 = b[property]
        return value1 - value2
      }
    }
    
    //向数组中添加异步任务 收集所有的异步任务
    const addAsyncTasts = (item) => {
      asyncTasks.push(item)
      //根据order字段进行排序
      asyncTasks = asyncTasks.sort(compare('order'))
      console.log('🚀🚀~ asyncTasks:', asyncTasks)
    }
    .......

子组件一

//省略部分上文出现过的代码
setup() {
    .......
    onBeforeMount(() => {
      //条件判断 if...  此处满足条件将通知父组件收集任务
      emitter.emit('add-async-tasts', { fun: taskA, order: 1 })
    })
    .......

子组件二

//省略部分上文出现过的代码
setup() {
    .......
    onBeforeMount(() => {
      //条件判断 if...  此处满足条件将通知父组件收集任务
      emitter.emit('add-async-tasts', { fun: taskB, order: 2 })
    })
    .......

看一下结果，可以看到依然收集到了两个任务，并且按照order进行了排序

image.png

我们修改子组件一的 order 为 3 ，再来验证一下结果是否正确

image.png

可以看到 taskA 排到了 taskB 的后面，说明我们的自定义异步任务的顺序也实现了。

步骤五

任务收集起来以后，接下里就是构建任务队列了

父组件

//省略部分上文出现过的代码
setup() {
    .......
    //实例被挂载后调用  为了保证收集完所有的任务，我们在onMounted周期中执行队列
    //mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 nextTick
    onMounted(() => {
      nextTick(() => {
        // 构建队列
        const queue = async (arr) => {
          for (let item of arr) {
            await item.fun()
          }
          //返回一个完成状态的promise,才可以继续链式调用
          return Promise.resolve()
        }

        // 执行队列
        queue(asyncTasks)
          .then((data) => {
            //所有子组件的任务完成后,进行父组件的任务
            //如果想先进行父组件的任务,可以把order定义为0存进任务队列
            return taskC()
          })
          .catch((e) => console.log(e))
      })
    })
 })
    .......

看一下结果，可以看到所有的任务都按顺序进行了。

2.gif

步骤六

使用真实的弹窗场景修改代码

先来简单看一下 Promise , Promise 的使用不是本文的内容

Promise 对象的状态不受外界影响。

Promise 对象代表一个异步操作，有三种状态：

  • Pending（进行中）
  • Resolved（已完成，又称 Fulfilled）
  • Rejected（已失败）

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

但是通过实践发现其实是可以在外部手动修改 Promise 的状态的

具体参考下面这篇文章👉
如何在Promise外部控制其状态

既然可以修改，那么我们就在子组件的按钮点击事件中，添加可以手动修改 Promise 状态的代码

//省略部分上文出现过的代码
setup() {
    .......
 //用来在外部改变promise的状态
    let fullfilledFn
    //异步任务
    const taskA = () => {
      return new Promise((resolve, reject) => {
        showPopp.value = true
        fullfilledFn = () => {
          resolve()
        }
      })
    }
    //取消的逻辑
    const cancle = () => {
      showPopp.value = false
      fullfilledFn()
    }
    //确认的逻辑
    const confirm = () => {
      showPopp.value = false
      fullfilledFn()
    }
 })
    .......

最后看一下结果

3.gif

全部代码

最后贴一下全部代码

父组件

<!--
 * @Description: 
 * @Date: 2021-06-23 09:48:13
 * @LastEditTime: 2021-07-07 10:34:04
 * @FilePath: \one\src\App.vue
-->
<template>
  <div>
    <h1>我是父组件!</h1>
    <child-one></child-one>
    <child-two></child-two>
  </div>
  <div class="popup"
       v-if="showPopp">
    <h1>我是父组件弹窗</h1>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, onUnmounted, nextTick, ref } from 'vue'

import ChildOne from './components/Child1.vue'
import ChildTwo from './components/Child2.vue'

import emitter from './mitt'

export default defineComponent({
  name: '',
  components: {
    ChildOne,
    ChildTwo,
  },
  setup() {
    //控制弹窗显示
    const showPopp = ref(false)
    //排序函数
    const compare = (property) => {
      return (a, b) => {
        let value1 = a[property]
        let value2 = b[property]
        return value1 - value2
      }
    }

    //组件要单独处理的异步任务
    const taskC = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          showPopp.value = true
          resolve()
        }, 1000)
      })
    }

    // 声明一个空数组  用来存放所有的异步任务
    let asyncTasks = []

    //向数组中添加异步任务 收集所有的异步任务
    const addAsyncTasts = (item) => {
      asyncTasks.push(item)
      asyncTasks = asyncTasks.sort(compare('order'))
      console.log('🚀🚀~ asyncTasks:', asyncTasks)
    }

    // 监听addAsyncTasts事件,当有异步任务触发的时候把异步任务添加到数组中
    emitter.on('add-async-tasts', addAsyncTasts)

    //实例被挂载后调用 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 nextTick
    onMounted(() => {
      nextTick(() => {
        // 构建队列
        const queue = async (arr) => {
          for (let item of arr) {
            await item.fun()
          }
          return Promise.resolve()
        }

        // 执行队列
        queue(asyncTasks)
          .then((data) => {
            return taskC()
          })
          .catch((e) => console.log(e))
      })
    })

    // 组件卸载的时候移除监听事件,数组重置为空
    onUnmounted(() => {
      emitter.off('add-async-tasts', addAsyncTasts)
      asyncTasks = []
    })

    return {
      showPopp,
    }
  },
})
</script>

子组件一

<!--
 * @Description: 
 * @Date: 2021-06-23 09:48:13
 * @LastEditTime: 2021-07-07 10:32:52
 * @FilePath: \one\src\components\Child1.vue
-->
<template>
  <div>
    我是楼层一
  </div>

  <div class="popup"
       v-if="showPopp">
    <h3>我是弹窗一</h3>
    <div>
      <button @click='cancle'>取消</button>
      <button @click='confirm'>确定</button>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onBeforeMount, ref } from 'vue'
import emitter from '../mitt'

export default defineComponent({
  name: '',
  setup() {
    //控制弹窗显示
    const showPopp = ref(false)
    //用来在外部改变promise的状态
    let fullfilledFn
    //异步任务
    const taskA = () => {
      return new Promise((resolve, reject) => {
        showPopp.value = true
        fullfilledFn = () => {
          resolve()
        }
      })
    }
    //取消的逻辑
    const cancle = () => {
      showPopp.value = false
      fullfilledFn()
    }
    //确认的逻辑
    const confirm = () => {
      showPopp.value = false
      fullfilledFn()
    }
    onBeforeMount(() => {
      //条件判断 if...
      emitter.emit('add-async-tasts', { fun: taskA, order: 1 })
    })
    return {
      showPopp,
      cancle,
      confirm,
    }
  },
})
</script>

子组件二

<!--
 * @Description: 
 * @Date: 2021-06-23 18:46:29
 * @LastEditTime: 2021-07-07 10:33:11
 * @FilePath: \one\src\components\Child2.vue
-->
<template>
  <div>
    我是楼层二
  </div>
  <div class="popup"
       v-if="showPopp">
    <h3>我是弹窗二</h3>
    <div>
      <button @click='cancle'>取消</button>
      <button @click='confirm'>确定</button>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onBeforeMount, ref } from 'vue'
import emitter from '../mitt'

export default defineComponent({
  name: '',
  setup() {
    //用来在外部改变promise的状态
    let fullfilledFn

    //控制弹窗显示
    const showPopp = ref(false)

    //异步任务
    const taskB = () => {
      return new Promise((resolve, reject) => {
        showPopp.value = true
        fullfilledFn = () => {
          resolve()
        }
      })
    }
    //取消的逻辑
    const cancle = () => {
      showPopp.value = false
      fullfilledFn()
    }
    //确认的逻辑
    const confirm = () => {
      showPopp.value = false
      fullfilledFn()
    }
    onBeforeMount(() => {
      //条件判断 if...
      emitter.emit('add-async-tasts', { fun: taskB, order: 2 })
    })
    return {
      showPopp,
      cancle,
      confirm,
    }
  },
})
</script>

这个方案是第一次遇见这种需求，拍脑门想出来的，肯定不是最好的方案，但也算是一个招。希望各位大佬可以指点更好更简单的方案。

参考

如何在Promise外部控制其状态

一尾流莺_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目中实现语音队列的依次播放
weixin_46995731的博客
02-23 2737
vue项目中实现语音队列的依次播放 需求分析 通过长链接接收后台返回的消息数据,并进行语音的依次播放完整.长链接和语音播放功能在以往的文章中都有介绍.再次我们主要着重介绍语音依次播放的功能. 那怎样实现依次播放呢? 1.需要用一个数组存储接收到的数据对象. 存储到数组中就不多说了,push进去就可以. 2.按照顺序进行播放. 消息队列有了,初始想法是使用一个定时器,每隔几秒播报消息队列中的消息,这样需要统计每条消息的时间来设置一个最长时间进行轮巡,如果语音播报时间相同这样好设置,如果是不同的话,设置的轮巡
【Vue案例】使用Vue实现doList任务队列
借他一双眼，愿这盛世如先生所愿
01-07 995
一个基于Vue.js的任务管理应用的功能实现； 其中包括了主要的配置文件Vue.config.js、应用入口文件main.js、以及三个自定义组件MyHeader.vue、MyList.vue和MyFooter.vue； 通过这些组件的交互，实现了一个简单的任务管理系统，用户可以添加、勾选、取消勾选和删除任务，并且可以全选或取消全选任务，以及清除已完成的任务；
2024年最全Vue3侦听器和异步任务调度, 其中有个神秘角色_vue3监听异步函数，今日头条前端面试题
最新发布
2401_84434086的博客
05-14 263
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】新后的DOM了？？})##### 不那么神秘的`forceUpdate`### 最后由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
Vue遍历三组数据为一组，分组节点显示不同的class
qq_37085668的博客
05-18 761
1.思路：三组数据为一组那么我们可以把三组数据放到一个集合里面。遍历的时候双层for循环 <template> <div> <div v-for="(item, index) in result" :key="index" class="itemContent"> <div v-for="(data,Itemi) in item" :key="Itemi" :class="'appItem'+Itemi"> &
vue列表根据类型渲染不同图标
weixin_47586598的博客
06-15 938
vue列表根据类型渲染不同图标
vue实现同一个页面某一位置进行不同组件切换展示效果
weixin_51935690的博客
07-27 6670
目录结构如图，在主页面home点击旁边导航切换不同组件在同一页面效果 2、动态路由<component:is="componentnext"></component>用于切换组件，改变componentnext的组件名字即可，利用了动态绑定:class来指定此组件时此导航选中颜色的变化 2.代码即注释如下 <template> <div> <!-- <Top-head></Top-head> --> .
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
由于Vue的异步更新队列机制，DOM的更新可能滞后于JavaScript代码的执行。当组件或元素还在渲染过程中，尝试访问`this.$refs`会得到`undefined`，因为它们还未被创建。 例如，在弹窗打开的瞬间立即访问`this.$refs`...
商品项目，前端展示页面vue2,后台管理页面vue3,后端spingboot
12-29
Vue2引入了虚拟DOM、组件化、单向数据流和异步更新队列等特性，提高了应用性能和开发效率。在商品项目前端展示页面中，Vue2可能被用来创建可复用的组件，如商品卡片、购物车、导航菜单等，并通过其强大的响应式系统...
解决vue的变量在settimeout内部效果失效的问题
10-18
在Vue.js开发过程中，有时会遇到在`setTimeout`函数内部修改组件状态（如变量）时，预期的效果并未体现出来，这个问题通常与JavaScript的异步执行机制以及`this`的指向有关。本文将详细讲解如何解决Vue中在`...
vue2、vue3开发工具 dev tools，页面数据更新，data里或者是setup的数据不更新，需要更换增强版插件
05-09
3. **异步更新队列**：Vue的更新是异步的，数据变更不会立即反映到视图上，而是在下一个tick中。你可以使用`Vue.nextTick`或`Promise.then`来等待视图更新。 4. **Vue版本与DevTools版本兼容性**：确认你的Vue应用...
VUE DOM加载后执行自定义事件的方法
10-18
一个更Vue风格的解决方案可能是使用`nextTick`方法或者Vue的异步更新队列。`Vue.nextTick`会在当前队列中的所有DOM更新完成后执行回调，这样我们就可以确保在DOM更新后执行自定义事件： ```javascript new Vue({ /...
Vue异步任务队列的实现及应用示例
码奴一只猿
04-20 1307
Vue是一个非常流行的JavaScript框架，广泛应用于Web应用程序开发中。在Vue应用中，经常会遇到需要执行异步任务的情况，比如从服务器获取数据、处理大量计算、执行复杂动画等。为了避免阻塞主线程，我们需要使用异步任务队列来处理这些任务。本文将介绍如何在Vue应用中实现异步任务队列，并提供一个实际应用的示例代码。
简单的前端任务队列
weixin_44665959的博客
03-06 1558
背景 在开发中，我们会遇到一些使用多个异步请求但返回数据需要按序的问题，如前端导出、多个文件上传，你可能会想到使用结合并发限制下分组处理使用Promise.all，虽然说这种方式可以提高请求的速度，但终归的得等到所有响应回来后才可进入下一个分组。这时候我们就可以用结合并发数，结合队列的特点让请求有序发出。 介绍 结合网上其他大佬的做法实现了一些改造，接下来让我们来介绍一下如何实现一个在限制最大同时并发数同时并在请求失败时可以重发的通用请求并发队列： export default class RequestQ
vue3中实现异步组件
MMccGrady的博客
02-20 3868
使用场景一：当组件进入视窗时再进行加载假设页面中有三个组件A、B、CC组件中有一张图片打开页面：如果一个页面中的内容非常多，用户再首次打开时并没有浏览到下方的内容，但页面必须加载完下方的内容才会显示，这无疑非常影响性能接下来我们做一些调整。
vue中事件循环，任务队列
weixin_53315593的博客
08-21 152
vue事件循环，任务队列
Vue3前端实现一个本地消息队列(MQ)， 让消息延迟消费或者做缓存
m0_55337678的博客
02-26 1271
前端实现一个本地MQ，本地缓存，消息队列
vue3 + axios 中断取消接口请求
qq_37656005的博客
10-20 2979
弹窗中接口请求返回图片，用于前端展示，接口还没返回数据，此时关闭弹窗，需要中断接口请求tab标签页根据后端返回数据，依次渲染，频繁切换标签，需要中断接口请求for循环中请求接口，遇到跳出循环情况，也需要中断接口请求跳转路由，离开页面时，可能也需要中断接口请求下面就是根据以上问题，找到的解决方案。
vue中异步渲染
baidu_38603918的博客
09-03 780
今天在知乎遇到一个这样的问题： ​ 看到这个问题的时候思考了一下，mounted确实已经加载完DOM，并且完成挂载操作了，为什么在这个地方能够进行渲染呢。 后面想到了vue中的Virtual DOM，应该是渲染完成再通过beforeUdated钩子函数渲染到真实DOM节点上，所以渲染到真实 DOM的时候实际上执行的是一个异步函数，等虚拟DOM都渲染完成之后再通知真实DOM执行回调，这样就能渲染到真实页面上了。 回到本问题，因为mounted还是异步函数中同步执行的过程，所以才能够修改“kkk.
vue3父子组件异步传值
08-15
在Vue3中，父组件向子组件异步传递值时，子组件可能在接收到数据之前就已经开始渲染，导致无法成功渲染异步数据。解决这个问题的方法是使用watch来监听props所接收到的数据，并在数据到达后进行渲染。在子组件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值