奇淫巧技-vue缓存接口数据

Posted 2021-09-13 NANA

vue缓存接口

场景：

相同接口不再调用
1.比如搜名字的功能，一样的参数不会再重复发送接口
2.比如二级筛选，二级选项根据一级选择请求接口，缓存后可减少请求次数

解决

利用vue的cached函数

将参数做为key缓存起来value为对应的函数
function cached(fn) {
    var cache = Object.create(null);
    return (function cachedFn(str) {
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
    })
}

* 但是该函数支持参数是一个的情况
* 如果有多个参数，应该做一些修改

function cached(fn) {
  const cache = Object.create(null);
  return function cachedFn(params) {
    let key = typeof(params) === \'string\' ? params : JSON.stringify(params);
    // 如果参数是一个对象的话转成字符串做为存储的key
    const hit = cache[key];
    return hit || (cache[key] = fn.call(fn, params));
  };
} 

调用
import axios from \'axios\';

const init =  cached(
 function(params) {
    return 
        axios({
          method: "post",
          url: \'xxx\',
          data: params
        }).then(res=>{
           return res
        })
}

init();

总结

相同参数不会再掉接口
不管接口结果返回没
只要参数相同不会再掉接口
好使 ！！！