不用防抖和节流，用更底层的方式解决JS的重复请求

你或许在项目中遇到过这样的情况。成员A成员B都用得上一个后端接口api，但它们互相不知道对方什么时候请求这个接口，因此导致一打开页面，同一个接口竟然重复请求了多次。由于用户手抖，又因为成员忘记做请求的loading防误触处理，导致一个接口被用于疯狂请求，最终数据乱套，页面不可用。SPA单页面应用，多个页面甚至是多个组件可能有同样的数据请求，完全可以共享的数据却不得不重复请求，影响页面加载效率。想要用节流或者防抖解决上面的问题，但是后端返回数据的时间浮动太大，导致不知道应该设置多长的时间。这些请求浪费，实际上都有调用异步函数（async function）的参与的；因此，它们虽不是async function的问题，但却可以利用async function的特点来解决。async function本质上是一个Promise。因此只要利用好Promise的特性，就能解决这些问题。once-init 正是为解决这些问题而生。它从 Promise 的定义出发，用 Promise 的基础功能彻底地阻止了异步请求浪费的发生。我用它做了两件事：缓存请求的返回值；缓存Promise请求本身；原理once-init 的核心思想是缓存和执行队列；缓存返回值实现缓存返回值并不困难，只要写一个单例模式就好了。下面是一个缓存的单例模式的简单示例；

如果缓存已经有值，返回缓存的值；如果缓存没有值，执行异步函数；执行完毕后，更新缓存；这是一个简易的解决方案，它大概能解决10%的异步函数相关的问题，因为在第一次执行Promise完成之后，就不会再进行请求，也就不会产生浪费了；但是，它没有解决多个Promise同时发生的情况。假设开发人员同一时间多次调用init，如果第一次调用的Promise还没有完成，cache也还没有初始化，就会导致同一时间的所有调用依旧创建新的Promise。甚至有可能因为多次请求，不断的变化cache，你甚至没有办法确定最后cache的值是不是你最后一次请求的返回值。如果要解决这个问题，就需要利用Promise的特性，同一时间，同一个async function，只允许同一个Promise处在pending状态。缓存 Promise如果Promise正在执行，就不创建新的Promise；直接返回正在执行的Promise的返回值；如果没有Promise正在执行，就创建并缓存新的Promise；Promise执行结束之后，删除缓存的Promise；

通过这种方式，就能避免promise同一时间重复执行。这也是once-init这个库的核心思想。当然这个简单实现还有很多问题需要解决。​通过这种方式，就能避免promise同一时间重复执行。这也是once-init这个库的核心思想。