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

比如下面这样的tab切换页，我现在用的方法是,点击当前选项调用一下接口，比如点击全部调用一次，点击提现调用一次，但是这样会浪费接口， ... 注册登录问答专栏课程招聘活动发现✓使用“Bing”搜本站使用“Google”搜本站使用“百度”搜本站站内搜索注册登录首页问答javascript问答详情0tab切换调用接口次数太多，该如何优化，不浪费？iop_js_L62发布于2018-07-15 比如下面这样的tab切换页，我现在用的方法是,点击当前选项调用一下接口，比如点击全部调用一次，点击提现调用一次，但是这样会浪费接口，我现在想的办法是，上来一次性都调用，需要写三个函数吗？循环调用的话我感觉不行，因为还有点击分页功能，求支个简单的方法 就像这个简单函数一样，点击一次就会打印 function(){ console.log(1) } javascript小程序微信小程序关注9收藏0赞0回复阅读4k8个回答得票最新0lpe2341.7k发布于2018-07-16 没太理解你所谓的“浪费”是啥意思~ 比如后端定义接口xxx.xx?status=[int]当传0时，查询全部；1时，提现中；2时，已提现。

这样写一个通用的函数functionxx(status,cb){} 赞0回复0云香水识3.2k更新于2018-07-16on('tab',(function(){ vardata={} returnfunctionasync(tabId){ constres=awaitPromise.resolve(data[tabId]||fetch(`url?tabId=${tabId}`).then(res=>res.json())) data[tabId]=res } })())赞0回复0LeeChan134发布于2018-07-16对于这种你要是觉得你所谓的浪费就不要用接口，非要用的话你就再加上个本地缓存赞0回复0redbuck2.6k发布于2018-07-16上缓存就可以了.用一个对象(dataMap)保存分页数据.全部/提现/已提现都作为它的一个属性,另外再维护一个currentData.切换tab的时候,使currentData指向相应的对象,如果没有则请求接口,并添加到dataMap上.页面与currentData绑定.赞0回复0金刚葫芦娃171发布于2018-07-16后端给的接口应该是有一个变量参数的你只需要写一个函数传给后端不通的参数就行了，例如：0=全部，1=提现中，2=已提现。

在页面加载时候写一个函数三次invoking，这样就不至于每次点击都请求一次。

至于分页的话也是如此，切换到当前tab点击下一页传好参数就可以了。

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

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

具体选哪种就看实际情况哪种更合适吧 赞0回复0四月的桜和猫3.2k发布于2018-07-16先全部加载，然后再根据tab切换控制dom的显示隐藏赞0回复0liucz105发布于2018-07-17我觉得并不算是浪费，看你这个位置的需求，更合理的应该是，做一个flag，在第一次点击某一个tab时，加载当前tab页的数据，并且支持当前页面的下拉刷新，保证用户想要的提现信息是实时的。

多次点击tab也只会请求3次，用户主动下拉刷新也不存在浪费一说。

赞0回复查看全部8个回答宣传栏3978