关于vue.js:奇淫巧技vue缓存接口数据

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();

总结

雷同参数不会再掉接口
不论接口后果返回没
只有参数雷同不会再掉接口
好使 ！！！