解锁JavaScript异步编程:Promise并发控制实战

简介: 解锁JavaScript异步编程:Promise并发控制实战

解锁JavaScript异步编程:Promise并发控制实战

在现代前端开发中,异步操作无处不在。JavaScript的Promise极大地简化了异步编程,但当我们需要同时处理大量异步任务时,直接使用Promise.all可能会带来性能问题甚至导致系统崩溃。

为什么需要并发控制?

想象一下,你有一个包含1000个URL的数组,如果同时发起所有请求,可能会导致:

  • 浏览器内存溢出
  • 服务器过载拒绝响应
  • 网络带宽被占满

实现Promise并发池

下面是一个简单而强大的并发控制函数:

class PromisePool {
   
  constructor(maxConcurrent) {
   
    this.maxConcurrent = maxConcurrent
    this.currentCount = 0
    this.queue = []
  }

  add(task) {
   
    return new Promise((resolve, reject) => {
   
      this.queue.push({
    task, resolve, reject })
      this._run()
    })
  }

  _run() {
   
    while (this.queue.length > 0 && this.currentCount < this.maxConcurrent) {
   
      const {
    task, resolve, reject } = this.queue.shift()
      this.currentCount++

      task()
        .then(resolve)
        .catch(reject)
        .finally(() => {
   
          this.currentCount--
          this._run()
        })
    }
  }
}

使用示例

// 创建最多同时处理3个请求的池
const pool = new PromisePool(3)

// 模拟异步任务
const tasks = Array.from({
    length: 10 }, (_, i) => 
  () => fetch(`/api/data/${
     i}`)
)

// 添加所有任务到池中
tasks.forEach(task => {
   
  pool.add(task).then(data => {
   
    console.log('任务完成:', data)
  })
})

总结

通过实现Promise并发控制,我们能够在保证系统稳定性的前提下,最大限度地利用可用资源。这种模式特别适用于文件上传、批量数据获取等场景,是每个前端开发者都应该掌握的实用技巧。

记住,好的并发控制就像交通信号灯,不是限制通行,而是确保所有车辆都能高效安全地到达目的地。

在现代前端开发中,异步操作无处不在。JavaScript的Promise极大地简化了异步编程,但当我们需要同时处理大量异步任务时,直接使用Promise.all可能会带来性能问题甚至导致系统崩溃。

为什么需要并发控制?

想象一下,你有一个包含1000个URL的数组,如果同时发起所有请求,可能会导致:

  • 浏览器内存溢出
  • 服务器过载拒绝响应
  • 网络带宽被占满

实现Promise并发池

下面是一个简单而强大的并发控制函数:

class PromisePool {
   
  constructor(maxConcurrent) {
   
    this.maxConcurrent = maxConcurrent
    this.currentCount = 0
    this.queue = []
  }

  add(task) {
   
    return new Promise((resolve, reject) => {
   
      this.queue.push({
    task, resolve, reject })
      this._run()
    })
  }

  _run() {
   
    while (this.queue.length > 0 && this.currentCount < this.maxConcurrent) {
   
      const {
    task, resolve, reject } = this.queue.shift()
      this.currentCount++

      task()
        .then(resolve)
        .catch(reject)
        .finally(() => {
   
          this.currentCount--
          this._run()
        })
    }
  }
}

使用示例

// 创建最多同时处理3个请求的池
const pool = new PromisePool(3)

// 模拟异步任务
const tasks = Array.from({
    length: 10 }, (_, i) => 
  () => fetch(`/api/data/${
     i}`)
)

// 添加所有任务到池中
tasks.forEach(task => {
   
  pool.add(task).then(data => {
   
    console.log('任务完成:', data)
  })
})

总结

通过实现Promise并发控制,我们能够在保证系统稳定性的前提下,最大限度地利用可用资源。这种模式特别适用于文件上传、批量数据获取等场景,是每个前端开发者都应该掌握的实用技巧。

记住,好的并发控制就像交通信号灯,不是限制通行,而是确保所有车辆都能高效安全地到达目的地。

目录
相关文章
|
人工智能 大数据 数据中心
|
移动开发
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
551 0
|
存储 前端开发 JavaScript
面试官问:如果有100个请求,你如何使用Promise控制并发?
面试官问:如果有100个请求,你如何使用Promise控制并发?
1190 0
|
前端开发 数据处理
如何使用 Promise.all() 处理异步并发操作?
使用 `Promise.all()` 可以方便地处理多个异步并发操作,提高代码的执行效率和可读性,同时通过统一的 `.catch()` 方法能够有效地处理异步操作中的错误,确保程序的稳定性。
1167 155
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
446 8
|
存储 前端开发 JavaScript
JavaScript 并发任务控制
【8月更文挑战第31天】JavaScript 并发任务控制
508 2
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
493 2
了解 css中 backface-visibility 属性
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
4308 0
|
JavaScript 前端开发
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
775 1
|
JavaScript 安全 前端开发
JS禁止查看网页源代码的简单实现方法
JS禁止查看网页源代码的简单实现方法
1475 89

热门文章

最新文章