管理網路請求的與快取請求資料,提高效能

2021-10-05 06:43:20 字數 1848 閱讀 2851

網路請求的往往是限制前端新能的重要因素,頁面的卡頓往往不是前端渲染的問題而是請求資料慢或者頻繁請求導致的。大型複雜的業務更加需要做請求的快取,同時又要有細粒度的控制能力,哪些請求可以快取,哪些請求不需要快取,哪些請求可以直接存到localstorage裡,哪些只在當前頁面做快取,以及何時應該清理快取。為了解決以上問題,我們自己封裝了乙個強大的createservice方法,可以高效,便捷,細粒度去控制項的請求,並且避免相同的請求重複執行,但在做快取的同時一定要注意是不是真的需要做快取,資料是否有時效性的要求。

下面直接上**,沉澱了兩年的createservice終於出爐了(其中的一些依賴(request,storage)就不羅列了,理解設計思想就可以),最終目的就是建立乙個mixin

export const createservice = (defaultoptions = {}) => ,

getparam = (instance) => ({})

} = defaultoptions;

let store;

cache && (store = storage.get(`$_$`));

store = store || ;

// clear, 這塊**只會執行一次,所以退出登入後不應該吧cbs清空

!cache && servicemanager.add(() => ;

});let loadpromise;

return ) => ;

// 具體看哪些引數可以被重置的

const = options;

// 方法首字母大寫

const strfn = key.charat(0).touppercase() + key.slice(1);

const loadkey = `load$`;

const clearkey = `clear$`;

const loadingkey = `loading$`;

return ;

},created() )));

},methods: ) ;

this[key] = store.res.parseddata || store.res.data;

typeof cache === 'function' ? cache(key, store) : cache && storage.set(`$_$`, store);

return res;

}).catch((res) => ).finally(() => );

};if (!localdata && loadpromise && isequalwith(store.param, param))

loadpromise = ajax();

},[clearkey]() ;

loadpromise = undefined;

this[loadingkey] = false;}}

};} };

};

使用方式

定義service(此處的inittree可以看我的另一篇樹結構處理的部落格,個人覺得還是不錯的)

const services = ),

// 全國所有的位址

...createservice()

}),// 物流公司

...createservice()

};

呼叫service

import service from '@stores/services/common';

export default ,

mixins: [service.region()]

....

}

Volley網路請求資料框架

volley網路請求框架 首先我們要先來解釋一下volley這個東西是什麼?它要具體幹什麼?它的優勢及劣勢是什麼?我們一點點來吧。我們先來說一下這個是什麼?根據官方說明 它是2013年google i o上發布的一款網路框架 基於android 平台,能夠使網路通訊更快更簡單更健全等等 說白了就是乙...

angular的請求資料

關於angular的資料請求的方式 get請求 import from angualr common http 引入模組 imports 宣告 2.在元件中引入並宣告 import from angular common http 引入 constructor private http httpcl...

inoic請求資料與loading的顯示隱藏

可以用當前的this配置邏輯shu j var name this.setname function name this.getname function this.getdata function 可以從快取裡呼叫資料,減少請求的次數 rootscope.on loading show funct...