1s內控制向某個請求請求的次數

^Mao^發表於2024-07-03

背景

有的時候後端提供的介面對相同的IP進行限制，在某個時間內不能傳送超過X條的請求，一旦超過指定的請求數會導致後續請求介面會出現異常。

效果

需求

比如：在1s內最多同時傳送2個請求，多出來的請求在後續的1s或者後續的Ns中發起

程式碼

<template>
  <div class="app">
    <el-divider content-position="center"
      >1.1s內向某個IP最多傳送2個請求</el-divider
    >
    <el-button type="primary" @click="send_request">傳送請求</el-button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {}
  },
  methods: {
    send_request() {
      // 需要傳送的請求個數
      const need_send_request_num = 5
      const queue_arr = []
      /**
       *
       * @param total_request_num 需要向服務請求的總數
       * @param max_request_num  向某個IP最大請求數量
       * @param startIndex       第N個請求
       */
      const foo = (total_request_num, max_request_num = 2, startIndex = 0) => {
        if (startIndex >= total_request_num) {
          // console.log('所有請求完成了')
          // TODO:所有請求完成時
          Promise.all(queue_arr).then((res) => {
            console.log(res)
          })
        } else {
          const endIndex =
            startIndex + max_request_num > total_request_num
              ? total_request_num
              : startIndex + max_request_num
          let i = startIndex
          for (; i < endIndex; i++) {
            queue_arr.push(this.fetchData(i))
          }
          setTimeout(() => {
            foo(total_request_num, max_request_num, i)
          }, 1000)
        }
      }
      foo(need_send_request_num)
    },
    async fetchData(index) {
      const res = await axios.get('https://httpbin.org/get', {
        params: {
          index,
        },
      })
      return res.data
    },
  },
}
</script>

<style lang="less" scoped>
.app {
  padding: 40px;
}
</style>

相關文章