tab切换调用接口次数太多，该如何优化，不浪费？

Question

比如下面这样的tab切换页，我现在用的方法是,点击当前选项调用一下接口，比如点击全部调用一次，点击提现调用一次，但是这样会浪费接口，我现在想的办法是，上来一次性都调用，需要写三个函数吗？循环调用的话我感觉不行，因为还有点击分页功能，求支个简单的方法

就像这个简单函数一样，点击一次就会打印
function () {
    console.log(1)
}

Answer 1

没太理解你所谓的“浪费”是啥意思~

比如 后端定义接口 xxx.xx?status=[int] 当传0时，查询全部；1时，提现中；2时，已提现。

这样写一个通用的函数 function xx(status, cb) {}

Answer 2

on('tab', (function () {
  var data = {}
  return function async (tabId) {
    const res = await Promise.resolve(data[tabId] || fetch(`url?tabId=${tabId}`).then(res => res.json()))
    data[tabId] = res
  }
})())

Answer 3

对于这种 你要是觉得你所谓的浪费就不要用接口，非要用的话你就再加上个本地缓存

Answer 4

上缓存就可以了.
用一个对象(dataMap)保存分页数据.全部/提现/已提现都作为它的一个属性,另外再维护一个currentData.切换tab的时候,使currentData指向相应的对象,如果没有则请求接口,并添加到dataMap上.页面与currentData绑定.

Answer 5

后端给的接口应该是有一个变量参数的 你只需要写一个函数 传给后端不通的参数就行了，例如：0=全部，1=提现中，2=已提现。
在页面加载时候 写一个函数三次invoking，这样 就不至于每次点击都请求一次。
至于分页的话也是如此，切换到当前tab 点击下一页传好参数就可以了。

Answer 6

对于这种，我是写三个方法，每个方法都有对应的一个分页参数，页面一进来就把这三个方法全部调用一遍，之后它怎么切换 都不会触发方法，唯一改变的是 上拉加载 是对应哪个分页方法，比如现在的状态是全部，上拉加载只触发全部的方法，之后切换提现中状态再切换回全部 也不会重新加载。

我之前也考虑过只写一种方法，然后点击某个状态传入相应的参数来调用，但是这个不好的地方是 它切换到其它tab在切换回来，之前的数据就没了，又要重新加载，这个对用户体验不怎么好。

具体选哪种 就看实际情况哪种更合适吧

Answer 7

先全部加载，然后再根据tab切换控制dom的显示隐藏

Answer 8

我觉得并不算是浪费，看你这个位置的需求，更合理的应该是，做一个flag，在第一次点击某一个tab时，加载当前tab页的数据，并且支持当前页面的下拉刷新，保证用户想要的提现信息是实时的。多次点击tab也只会请求3次，用户主动下拉刷新也不存在浪费一说。