vue重复请求挂起

在前端开发中，随着页面复杂度不断提高，数据请求的频率也逐渐增加。而在Vue项目中，如果没有进行合理地优化，就会出现重复请求挂起的情况。

那么什么是重复请求挂起呢？简单来说，就是页面在进行数据请求的时候，出现了请求重复的情况，导致页面出现卡顿或者请求挂起等现象。

实际上，Vue框架本身并没有针对重复请求挂起的问题进行解决，这也是需要我们在开发项目的时候进行优化的一个点。

// 示例代码
import axios from 'axios'
import { debounce } from 'lodash'

export default {
  data() {
    return {
      list: []
    }
  },created() {
    this.getList()
  },methods: {
    getList: debounce(function() {
      axios.get('/api/list').then(res => {
        this.list = res.data
      },(err) => {
        console.error(err)
      })
    },300)
  }
}

针对重复请求挂起的问题，我们可以采用Debounce(防抖)和throttle(节流)两种方法来进行优化。下面我们将分别介绍这两种方法的具体实现。

Debounce(防抖)

Debounce(防抖)的原理是，当页面进行请求的时候，如果请求的频率过快，我们可以设置一个定时器，每次判断定时器是否已经完成，如果完成了就执行请求，否则就取消请求。这样，可以有效减少响应时间，避免重复请求挂起的现象。

// 防抖示例代码
import axios from 'axios'
import { debounce } from 'lodash'

export default {
  data() {
    return {
      list: []
    }
  },300)
  }
}

上面的代码中，我们使用了lodash中的debounce方法来进行防抖操作，设置了一个300ms的定时器，如果在300ms内重复执行getList方法，就取消前一个定时器，重新执行最新的请求。

Throttle(节流)

Throttle(节流)的原理是，在页面进行请求的时候，设置一个时间间隔，在这个时间间隔内只能触发一次请求。这样可以有效减少频繁请求，并且还可以控制请求的速度。

// 节流示例代码
import axios from 'axios'
import { throttle } from 'lodash'

export default {
  data() {
    return {
      list: []
    }
  },methods: {
    getList: throttle(function() {
      axios.get('/api/list').then(res => {
        this.list = res.data
      },300)
  }
}

上面的代码中，我们使用了lodash中的throttle方法来进行节流操作，设置了一个300ms的时间间隔，在这个时间间隔内只能触发一次getList方法。

综上所述，针对Vue项目中重复请求挂起的问题，我们可以采用Debounce(防抖)和throttle(节流)两种方法来进行优化，以达到优化页面响应速度的目的。