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

总结

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