高频设计题

1.大量请求如何控制并发？

• 浏览器发起的请求最大并发数量一般都是6~8个，这是因为浏览器会限制同一域名下的并发请求数量，以避免对服务器造成过大的压力。

import axios from 'axios'

export const handQueue = (
  reqs // 请求总数
) => {
  reqs = reqs || []


  const requestQueue = (concurrency) => {
    concurrency = concurrency || 6 // 最大并发数
    const queue = [] // 请求池
    let current = 0

    const dequeue = () => {
      while (current < concurrency && queue.length) {
        current++;
        const requestPromiseFactory = queue.shift() // 出列
        requestPromiseFactory()
          .then(() => { // 成功的请求逻辑
          })
          .catch(error => { // 失败
            console.log(error)
          })
          .finally(() => {
            current--
            dequeue()
          });
      }

    }

    return (requestPromiseFactory) => {
      queue.push(requestPromiseFactory) // 入队
      dequeue()
    }

  }

  const enqueue = requestQueue(6)

  for (let i = 0; i < reqs.length; i++) {

    enqueue(() => axios.get('/api/test' + i))
  }
}

2.同一个页面三个组件同时请求同一个API

const fetchUser = id => {
    return new Promise(resolve => {
        setTimeout(() =>{
            console.log('fetch:', id)
            resolve(id)
        })
    })
}

const cache = {}

const cacheFetchUser = id => {
    if(cache[id]){
        return cache[id]
    }
    cache[id] = fetchUser(id)
    return cache[id]
}

// 测试
cacheFetchUser(3).then((id) => console.log(id))
cacheFetchUser(3).then((id) => console.log(id))
cacheFetchUser(3).then((id) => console.log(id))