缓存函数

//max : 最大缓存数量
//cache: 注册一个缓存函数

class CacheHttp{
    constructor(max){
        this.max = max;
        this.cacheList = {};
    }
    cache(handler){
        return (...args)=>{
            return new Promise((resolve,reject)=>{
                let key = JSON.stringify(args);
                console.log('key',key)
                if(this.cacheList[key]){
                    console.log('cache数据')
                    resolve(this.cacheList[key])
                }else{ 
                    console.log('请求数据')
                    handler(...args).then(res=>{
                        resolve(res)
                        this.cacheList[key] = res;
                        let keys = Object.keys(this.cacheList);
                        if(keys.length>this.max){
                           delete keys[0]
                        }
                   }).catch(err=>{
                        reject(err)
                    })
                }
            }) 
        }
    }
}

//模拟get请求

function get(url,data){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(1) 
       },2000)
    })
}

const cacheHttp = new CacheHttp(100);//实例化
let cacheGet = cacheHttp.cache(get)

//第一次发送请求
cacheGet('/api/article?id=1',{id:1}).then(res=>{
    console.log('获取到数据',res)
})

//模拟第二次发送请求，实际上取得是第一次缓存的值
setTimeout(()=>{
    cacheGet('/api/article?id=1',{id:1}).then(res=>{
        console.log('获取到数据',res)
    })
},4000)

诞生背景：文章详情页反复触发（列表页再次进入、上一页、下一页），重复请求后台接口，造成资源浪费。

注意点：需要缓存的函数返回值须为promise，状态多变慎用

适合场景：文章详情、展示性内容