在面試的時(shí)候遇到的一個(gè)面試題感覺比較有意思就來(lái)記錄一下

題目如下：

實(shí)現(xiàn)一個(gè)方法在接收到同一個(gè)url請(qǐng)求時(shí)不重復(fù)請(qǐng)求后端直接返回結(jié)果

思考過(guò)程：

1胁住、定一個(gè)一個(gè)對(duì)象用來(lái)存儲(chǔ)對(duì)應(yīng)請(qǐng)求url下的狀態(tài)、和返回結(jié)果還有一個(gè)執(zhí)行隊(duì)列束铭。結(jié)構(gòu)如下

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

2岗喉、寫一個(gè)cacheRequest的函數(shù)接收三個(gè)參數(shù)url坯癣、sucCallback哼勇、failCallback诵闭，需要注意請(qǐng)求延時(shí)的情況欺旧，比如第一個(gè)url請(qǐng)求進(jìn)來(lái)之后還沒(méi)有返回結(jié)構(gòu)但是第二個(gè)相同的url又請(qǐng)求過(guò)來(lái)了

具體代碼

// 實(shí)現(xiàn)一個(gè)函數(shù)來(lái)模擬請(qǐng)求
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]) { // 已經(jīng)請(qǐng)求過(guò)妖啥，直接返回結(jié)果
        if (objArr[url].status === 'suc') { // 請(qǐng)求過(guò)芝硬，并成功
            sucCb(objArr[url].data);
        } else if (objArr[url].status === 'fail') { // 請(qǐng)求過(guò)，但失敗
            failCb(objArr[url].data);
        } else { // 已請(qǐng)求帝璧，但未返回結(jié)果先誉，將未執(zhí)行函數(shù)放入隊(duì)列
            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) { // 檢測(cè)并處理隊(duì)列中滯留的函數(shù)
                for (let i = 0; i < objArr[url].queue.length; i++) {
                    objArr[url].queue[i].suc(data);
                }
                objArr[url].queue = []; // 清空隊(duì)列
            }
        }, err => {
            objArr[url].data = err;
            objArr[url].status = 'fail';
            failCb(err);
            if (objArr[url].queue && objArr[url].queue.length > 0) { // 檢測(cè)并處理隊(duì)列中滯留的函數(shù)
                for (let i = 0; i < objArr[url].queue.length; i++) {
                    objArr[url].queue[i].fail(err);
                }
                objArr[url].queue = []; // 清空隊(duì)列
            }
        });
    }
}

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

下圖是測(cè)試用例結(jié)果