谈谈http请求数据前端缓存

2017-11-20 本文已影响50人反者道之动001

我今天推荐一个开源缓存请求神器 -- Xyios

当我们写单页应用的时候，特别是tab或者3大金刚，数据的get请求很经常造成页面数据加载很慢，于是用了load的方式，load由最早的菊花load演变模块load。但是还是没避免不断加载的问题，体验还不是很友好。如果路由设置缓存，但是数据又要实时更新，也行不通。

这时候xyios来了，可以自定义缓存周期，解决了上面的所有问题。Xios的默认请求方式是所有的，但是post一般不需要，可以排除，具体看API。

使用的话，我是配合axios使用。

下面是github Copy的介绍。

控制缓存，可配合支持promise的http插件使用，比如axios。

重点说一下， xyios不需要后台配合，简单粗暴。如果配合axios，不破坏原来的任何功能

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

config

cacheTime // 缓存周期 默认是10s   单位是秒
MaxCacheLen // 最多缓存接口数 默认是1000条
filtMethods // 过滤不想要缓存的方法

jsonp

目前只支持var格式
jsonp // true 调起jsonp模式
val 链接字，看get接口里面的var的值

axios的interceptors拦截器请写带xyios的前面

--END--