js实现请求缓存方法

在面试的时候遇到的一个面试题感觉比较有意思就来记录一下

题目如下:

实现一个方法在接收到同一个url请求时不重复请求后端直接返回结果

思考过程:

1、定一个一个对象用来存储对应请求url下的状态、和返回结果还有一个执行队列。结构如下

let obj = {
    url1: {
        status: 'suc',
        data: {
            a: 1,
            b: 2
        },
        queue: []
    },
    url2: {
        status: 'suc',
        data: {
            a: 1,
            b: 2
        },
        queue: []
    }
};

2、写一个cacheRequest的函数接收三个参数url、sucCallback、failCallback,需要注意请求延时的情况,比如第一个url请求进来之后还没有返回结构但是第二个相同的url又请求过来了

具体代码

// 实现一个函数来模拟请求
function resquest(url, suc, fail) {
    if (Math.random() * 10 > 2) {
        setTimeout(() => {
            console.log(url + '|' + 'suc');
            suc('sucess');
        }, Math.random() * 5 * 1000);
    } else {
        setTimeout(() => {
            console.log(url + '|' + 'fail');
            fail('fail');
        }, Math.random() * 5 * 1000);
    }
}

let objArr = {};
function cacheRequest(url, sucCb, failCb) {
    if (objArr[url]) { // 已经请求过,直接返回结果
        if (objArr[url].status === 'suc') { // 请求过,并成功
            sucCb(objArr[url].data);
        } else if (objArr[url].status === 'fail') { // 请求过,但失败
            failCb(objArr[url].data);
        } else { // 已请求,但未返回结果,将未执行函数放入队列
            if (objArr[url].queue && objArr[url].queue.length > 0) {
                objArr[url].queue.push({'suc': sucCb, 'fail': failCb});
            } else {
                objArr[url].queue = [{'suc': sucCb, 'fail': failCb}];
            }
        }
    } else {
        objArr[url] = {
            data: '',
            status: ''
        };
        resquest(url, data => {
            objArr[url].data = data;
            objArr[url].status = 'suc';
            sucCb(data);
            if (objArr[url].queue && objArr[url].queue.length > 0) { // 检测并处理队列中滞留的函数
                for (let i = 0; i < objArr[url].queue.length; i++) {
                    objArr[url].queue[i].suc(data);
                }
                objArr[url].queue = []; // 清空队列
            }
        }, err => {
            objArr[url].data = err;
            objArr[url].status = 'fail';
            failCb(err);
            if (objArr[url].queue && objArr[url].queue.length > 0) { // 检测并处理队列中滞留的函数
                for (let i = 0; i < objArr[url].queue.length; i++) {
                    objArr[url].queue[i].fail(err);
                }
                objArr[url].queue = []; // 清空队列
            }
        });
    }
}

cacheRequest('1.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});
cacheRequest('1.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});
cacheRequest('1.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});
cacheRequest('1.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});
cacheRequest('1.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});
cacheRequest('2.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});
cacheRequest('2.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});
cacheRequest('3.com', data => {
    console.log(data);
}, err => {
    console.log(err);
});

下图是测试用例结果


推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 4,997评论 0 2
  • 27、移动端响应式布局开发 响应式布局开发 1、什么是响应式布局开发?把我们开发完成的产品,能够让其适配不同的设备...
    萌妹撒阅读 444评论 0 0
  • 我们用不同的步伐 照亮无垠的夜空, 我希望,每一个时刻 都盛放出永恒的色彩; 为每个静默的回忆 留下红色蔷薇花香,...
    八度黑白阅读 330评论 0 6
  • 我是水滴浩瀚,用感恩日记真实记录浩瀚生活的点滴,看到万事万物的积极一面,寻找自己更多的可能性!同时也是4岁男宝的成...
    水滴浩瀚阅读 75评论 0 0
  • 我后来到过许多地方, 走进过很多家的花店, 都没有这家花店浓厚的花香, 这家花店的香味让我...
    箫玉公子阅读 220评论 1 3