js同步http請求並加緩存的實現

緩存實現

背景：有時候介面返回的數據短期內是不會改變的，可以對http介面返回的數據加緩存，即減少了後端請求，又加快了前端性能，真是一舉兩得！

實現原理：用js的Object對象即可實現緩存，{} 表示一個js對象，對象屬性名是唯一的可以作為緩存key,屬性值就是緩存value

例如：

//定義緩存
let cache = {}

//設置值
cache['name'] = '張三'
cache['age'] = 18

//獲取值
let name = cache['name']
let age = cache['age']

同步方案

方案一
ajax同步

方案二
加控制變數
由於js引擎單線程，串形執行，根據狀態判斷即可。isLoading由js引擎線程，ajax線程共同操作，為共用變數！js執行原理可見：https://blog.csdn.net/sdasadasds/article/details/125197852

下麵是偽代碼

/**
* 查詢數據
*/
function getData(){
    if(!isLoading){
        //不是數據載入中，則可以開始載入
        isLoading=true

        //http請求數據
        ajax回調 cache.put(key,data); isLoading=false;
    }else{
        //數據載入中，則迴圈延時等待數據
        setTimeout(getCacheData,100)
    }
}
/**
* 從緩存中取數據
*/
function getCacheData(){
   let that = this
    if(!isLoading){
        //不是載入中，即數據載入完畢，從緩存中取數據
        let data = cache.get(key)
        return data
    }else{
        //還在載入中，延時遞歸獲取
        setTimeout(that.getCacheData, 100)
    }
}