我今天推荐一个开源缓存请求神器 -- Xyios
当我们写单页应用的时候,特别是tab或者3大金刚,数据的get请求很经常造成页面数据加载很慢, 于是用了load的方式,load由最早的菊花load演变模块load。但是还是没避免不断加载的问题,体验还不是很友好。如果路由设置缓存,但是数据又要实时更新,也行不通。
这时候xyios来了,可以自定义缓存周期,解决了上面的所有问题。Xios的默认请求方式是所有的,但是post一般不需要,可以排除,具体看API。
使用的话,我是配合axios使用。
下面是github Copy的介绍。
控制缓存, 可配合支持promise的http插件使用,比如axios。
重点说一下, xyios不需要后台配合,简单粗暴。如果配合axios,不破坏原来的任何功能
Usage
import xyios from 'xyios'
let http = xyios(axios, {
cacheTime: 10,
MaxCacheLen: 1000,
filtMethods: ['post'],
})
Or jsonp _ var
xyios({
url: 'http://pv.sohu.com/cityjson',
jsonp: true,
val: 'returnCitySN'
}).then(e=>{
console.log(e)
})
配合axios和vue的实例
main.js全局注入
import xyios from 'xyios'
import axios from 'axios'
Vue.prototype.$http = xyios(axios, {
cacheTime: 10,
MaxCacheLen: 1000,
})
API
config
cacheTime // 缓存周期 默认是10s 单位是秒
MaxCacheLen // 最多缓存接口数 默认是1000条
filtMethods // 过滤不想要缓存的方法
jsonp
目前只支持var格式
jsonp // true 调起jsonp模式
val 链接字,看get接口里面的var的值
关于
axios的interceptors拦截器请写带xyios的前面
--END--
相关链接
xyios-github: https://github.com/0123cf/xyios
赞助商
专业的UI布局开发工具,生成自适应代码,在线发布预览。
http://layoutui.pro