前端在请求数据时使用节流来防止多个重复请求

先了解防抖和节流的区别：
两者的区别这位博主讲得非常仔细

在写项目的过程中，经常会遇到这样一种场景：
页面加载时，遇到大量的数据需要显示，常常使用上拉加载更多数据，从而实现数据的批量显示。每次上拉的时候，浏览器应该发送一次请求，获取最新的数据。
但是会出现这样一种情况：不停地上拉加载，上一个请求还没有成功返回数据，下一个请求又发出去了，导致请求越来越多，页面却还没显示数据，容易造成浏览器卡死。

解决方法：使用节流处理。在发送请求之前，先判断当前是否有其它请求在发送，如果有，则不发起下一个请求，等到上个请求已经成功返回数据了，才能发起下一个请求。
定义一个变量doneLoading，称之为节流阀，当它为true时表示请求已经发送完成，为false时表示请求正在发送。

具体实现：

list: [],
doneLoading: true, // 节流阀
// ...

getList: async function () {
    // 如果当前请求未结束，则等待请求完成
    if (!this.doneLoading) {
      return
    }
    
    // 请求正在发送
    this.doneLoading = false
    const res = await request('/list', {page: this.page})
    if(res.code !== 200) {
      alert('数据加载失败！')
      return 
    }
    
    this.list = this.list.concat(res.result)
    // 成功返回数据，请求完成
    this.doneLoading = true
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22