老K博客 - 一个源码和技术分享的博客

功能问题:如何防止接口重复请求?

老K博客
2024-07-02 / 0 评论 / 10 阅读 / 正在检测是否收录...
广告

前言

防止接口重复请求在软件开发中非常重要,重复请求必然会导致服务器资源的浪费。
因为每次请求都需要服务器进行处理,如果请求是重复的,那么服务器就在做不必要的工作。在高并发的场景下,这种浪费会成倍增加,可能导致服务器性能下降,甚至引发服务崩溃。

请求队列:

维护一个请求队列,每次发送请求前检查队列中是否已经存在相同的请求。如果存在相同请求,则不再发送,直接使用队列中的请求结果。这种方法可以确保相同请求只发送一次。

class RequestQueue {  
  constructor() {  
    this.queue = {};  
  }  
  
  addRequest(url, callback) {  
    if (this.queue[url]) {  
      // 如果队列中已有相同请求,则直接使用之前的请求结果  
      this.queue[url].callbacks.push(callback);  
      return;  
    }  
  
    this.queue[url] = {  
      callbacks: [callback],  
      // 假设这里使用fetch进行请求  
      promise: fetch(url).then(response => {  
        const data = response.json();  
        this.queue[url].callbacks.forEach(cb => cb(data));  
        delete this.queue[url]; // 请求完成后从队列中移除  
      })  
    };  
  }  
}  
  
// 使用  
const queue = new RequestQueue();  
queue.addRequest('https://api.example.com/data', data => {  
  console.log(data);  
});

请求取消:

在发送请求前,记录当前正在进行的请求,并在发送新请求时先取消之前的请求。可以使用 Axios 等库提供的取消请求功能来实现。

import axios from 'axios';  
  
let cancelTokenSource;  
  
function fetchData() {  
  if (cancelTokenSource) {  
    cancelTokenSource.cancel('Operation canceled by the user.'); // 取消之前的请求  
  }  
    
  cancelTokenSource = axios.CancelToken.source();  
    
  axios.get('https://api.example.com/data', {  
    cancelToken: cancelTokenSource.token  
  }).then(response => {  
    console.log(response.data);  
  }).catch(function (thrown) {  
    if (axios.isCancel(thrown)) {  
      console.log('Request canceled', thrown.message);  
    } else {  
      // 处理错误  
    }  
  });  
}  
  
// 调用fetchData时会取消之前的请求(如果存在)  
fetchData();

防抖(Debounce):

使用防抖函数控制请求的发送频率,确保在一段时间内只发送一次请求。这样可以避免频繁的重复请求。

比较容易理解,代码示例略了吧。

节流(Throttle):

与防抖类似,节流函数可以控制一段时间内请求的频率,但不会像防抖那样在每次触发事件后立即执行,而是在固定间隔内执行一次。

比较容易理解,代码示例略了吧。

请求标识:

为每个请求设置唯一标识,当新请求到来时,先检查是否存在相同标识的请求,如果存在则不发送新请求。

比较容易理解,代码示例略了吧。

缓存请求结果:

对于相同的请求,在第一次请求返回结果后将结果缓存起来,后续相同的请求可以直接使用缓存的结果,而不再发送重复请求。

比较容易理解,代码示例略了吧。

使用状态管理库:

在 Vue 应用中,可以结合状态管理库(如 Vuex、Pinia)来管理请求状态,确保只有一个请求在进行,避免重复请求。

// Vuex store配置  
const store = new Vuex.Store({  
  state: {  
    isFetching: false,  
    data: null  
  },  
  mutations: {  
    FETCH_START(state) {  
      state.isFetching = true;  
    },  
    FETCH_END(state, data) {  
      state.isFetching = false;  
      state.data = data;  
    }  
  },  
  actions: {  
    fetchData({ commit }) {  
      if (this.state.isFetching) {  
        return; // 如果已经在请求数据,则不再发送新请求  
      }  
        
      commit('FETCH_START');  
      return fetch('https://api.example.com/data').then(response => {  
        return response.json();  
      }).then(data => {  
        commit('FETCH_END', data);  
        return data;  
      });  
    }  
  }  
});  
  
// 在Vue组件中使用  
this.$store.dispatch('fetchData').then(data => {  
  console.log(data);  
});
本文共 644 个字数,平均阅读时长 ≈ 2分钟
广告
0

海报

正在生成.....

评论 (0)

语录
取消
CC BY-NC-ND