2.如何解决页面请求接口大规模并发问题#

const queue=[]

queue.push()
queue.shift()

class RequestQueue{
  constructor(maxConcurrent) {
    // 最大并发请求数
    this.maxConcurrent=maxConcurrent
    // 当前并发请求数
    this.currentConcurrent=0
    // 请求队列
    this.queue = []
  }
  add(request){
    return new Promise((resolve,reject)=>{
      this.queue.push({request,resolve,reject})
      this.processQueue()
    })
  }
  processQueue(){
    if(this.queue.length >0 && this.currentConcurrent < this.maxConcurrent){
      const {request,resolve,reject}=this.queue.shift()
      this.currentConcurrent++
      request().then(resolve).catch(reject).finally(()=>{
        this.currentConcurrent--
        this.processQueue()
      })
    }
  }
}

// 示例请求队列
function fetchData(url){
  return fetch(url).then(response=>response.json())
}

// 使用请求队列
 const requestQueue=new RequestQueue(5)// 设定最大并发数为5

const urls=[
  'https://api.example.com/data1',
  'https://api.example.com/data1'
]

const requests=urls.map(url=>()=>fetchData(url))

Promise.all(requests.map(request=>requestQueue.add(request)))
.then(results=>{
  console.log('所有请求完成',results);
}).catch(error=>{
  console.log('请求失败',error);
})

let currentPage=1
const pageSize=20
let isLoading=false

function loadMoreData(){
  if(isLoading) return
  isLoading=false
  fetch(`/api/items?page=${currentPage}&size=${pageSize}`)
    .then(response => response.json())
    .then(data=>{
      //处理数据更新页面
      const container=document.getElementById('item-container')
      data.items.forEach(item=>{
        const itemElement=document.createElement('div')
        itemElement.textContent=item.name
        container.appendChild(itemElement)
      })
      currentPage++
      isLoading=false
    })
}

// 监听滚动事件
window.addEventListener('scroll',()=>{
  if(window.innerHeight | window.screenY >=document.body.offsetHeight){
    loadMoreData()
  }
})

// 初始化加载
loadMoreData()