在前端向后端发送服务请求的时候，可能由于网络环境较差，用户会反复点击发送服务请求的按钮，这样就会导致短时间内前端会向后端发送同样的服务请求。所以，一般我们需要给向后端发送服务请求的方法加一个锁，使得在本次请求结束之前，前端不会向后端发送同样的服务请求。

具体的实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 锁
function requestPendingWrapper (fn) {
  let promise = null;
  let loading = false; // 加锁的标志

  return async (...params) => {
    console.log('run');

    if (loading) return promise;

    loading = true; // 加锁

    try {
      const promise = fn(...params);
      return await promise;
    } catch (err) {
      throw err;
    } finally {
      loading = false; // 解锁
      promise = null;
    }
  };
}

// 模拟数据请求
const requestMock = async (param) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(param), 5000);
  });
};

const wrappedRequest = requestPendingWrapper(async (str) => {
  const name = await requestMock(str);
  console.log(name);
});

setInterval(() => wrappedRequest('name'), 1000);

运行结果是：

image-20200502165547382

加锁是通过闭包的方式，让作为返回值的函数可以读取loading和promise的值。所以当loading === false的时候，会直接返回当前的promise。而当当前的promise完成之后，一定会去执行finally中的代码，这时候会讲loading只为false，表示解锁，可以再次发起新的数据请求了。

这种方法其实和节流函数是一样的原理，都是在一段时间内只做一次。但是为什么不直接用节流函数呢？因为一般在开发过程中，数据请求除了可以发送请求和处理返回结果之外，还有其他的一些通用的逻辑，比如，当后端还未返回数据的时候，会有一个菊花图之类的方法。类似这样的方法，也可以在requestPendingWrapper中封装起来较少代码的重复率，提高代码的复用率。