DataBaxe使用手册
前言【未经授权禁止转载】
转载请注明出处:www.tangshuang.net【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。前端代码中与后台API进行数据交换是一个本文作者:唐霜,转载请注明出处。原创内容,盗版必究。复杂的开发点,几乎在所有的项目中都会遇到未经授权,禁止复制转载。【未经授权禁止转载】。怎么从后台API获取数据,怎么提交数据【版权所有,侵权必究】【转载请注明来源】,怎么保证获取数据的快捷性、唯一性、不重本文版权归作者所有,未经授权不得转载。【本文受版权保护】复请求等问题,是这个点中的主要挑战。在《Databaxe:基于observer思【未经授权禁止转载】【转载请注明来源】想的数据(源)管理器》一文中我详细阐述了开发DataBaxe【本文首发于唐霜的博客】【本文受版权保护】的出发点和开发思路。但是在如何使用,以及【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net它的具体细节上,还没有详细介绍。本手册的转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。主要目标是,帮助开发者快速上手和快速查看转载请注明出处:www.tangshuang.net原创内容,盗版必究。使用方法,同时提供一些场景的解决方案。
【未经授权禁止转载】本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】快速上手未经授权,禁止复制转载。
未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net这一节帮助开发者快速上手如何使用Data【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。Baxe实现优雅的前端数据请求。
转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。安装【原创内容,转载请注明出处】
【转载请注明来源】【转载请注明来源】未经授权,禁止复制转载。【原创不易,请尊重版权】DataBaxe通过npm包的形式对外发【转载请注明来源】未经授权,禁止复制转载。布,你可以通过下面命令安装
【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net【版权所有,侵权必究】npm i -S databaxe
安装到项目之后,你可以如下引入【关注微信公众号:wwwtangshuangnet】
【本文受版权保护】未经授权,禁止复制转载。【未经授权禁止转载】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net// ES6引入方式
import DataBaxe from 'databaxe'
// CommonJS引入方式
const { DataBaxe } = require('databaxe')
另外,在浏览器中,为了可以单独运行Dat【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。aBaxe,你可以如下引入:
本文作者:唐霜,转载请注明出处。【作者:唐霜】【版权所有,侵权必究】原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】<script src="node_modules/databaxe/dist/databaxe.bundle.js"></script>
<script>
const { DataBaxe } = window.databaxe
</script>
DataBaxe是一个数据请求管理的工具【本文受版权保护】【关注微信公众号:wwwtangshuangnet】,不基于浏览器环境,因此,它可以在Nod【作者:唐霜】【转载请注明来源】eJS中运行。
【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】【原创不易,请尊重版权】【版权所有,侵权必究】创建实例【未经授权禁止转载】
【未经授权禁止转载】【本文受版权保护】【版权所有】唐霜 www.tangshuang.netDataBaxe这个对象是一个类,你可以【版权所有,侵权必究】转载请注明出处:www.tangshuang.net通过new关键字实例化一个对象,这个对象【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net就是一个数据管理器,用它来管理数据来源(原创内容,盗版必究。【未经授权禁止转载】api接口)、请求方式(请求组件axio【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】s的参数)、输出方式(返回数据如何处理)【作者:唐霜】未经授权,禁止复制转载。。
本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net【作者:唐霜】const dbx = new DataBaxe()
// 第一步:注册数据来源
dbx.register({
id: 'users',
url: '/api/v2/users',
})
export default dbx
---------------------------------
// 第二步:使用数据
;(async function() {
let users = await dbx.get('users')
// ...
})
dbx的所有方法都是async函数,调用转载请注明出处:www.tangshuang.net原创内容,盗版必究。的时候,你既可以像promise那样使用【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。then/catch,也可以在async【本文受版权保护】【本文受版权保护】函数中使用await关键字直接得到结果。
未经授权,禁止复制转载。原创内容,盗版必究。【版权所有,侵权必究】【转载请注明来源】【版权所有,侵权必究】上面这段代码中我们将dbx导出,在项目的【转载请注明来源】【作者:唐霜】其他地方使用dbx。而dbx其实是一个容【作者:唐霜】【版权所有】唐霜 www.tangshuang.net器,它包含了所有你注册好的数据源(含请求未经授权,禁止复制转载。【作者:唐霜】方式)。基于这样的设计,你可以将数据源集著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】中起来管理,将项目中所有需要用到的接口统【原创内容,转载请注明出处】【原创不易,请尊重版权】一封装为一个dbx(数据仓库),当你需要本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】某个数据的时候,只需要通过get去其中获著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】取即可。这使得数据源的管理和数据的使用完【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net全分离,对于使用者来说,可以做到完全无感【作者:唐霜】著作权归作者所有,禁止商业用途转载。的从仓库中获取数据,他完全不需要知道这个本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】数据是从哪个api来的,也不需要知道内部原创内容,盗版必究。【原创内容,转载请注明出处】是怎么请求数据的,他完全就是调用一个ge未经授权,禁止复制转载。【版权所有,侵权必究】t方法,并且知道每一个id代表的是什么数【未经授权禁止转载】【原创内容,转载请注明出处】据即可。
转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。【转载请注明来源】转载请注明出处:www.tangshuang.net这对于开发来说,其实是非常完美的一件事。【版权所有】唐霜 www.tangshuang.net【作者:唐霜】开发者仅仅需要记住一个id值,而不需要传【本文受版权保护】本文版权归作者所有,未经授权不得转载。参数,也不需要写特殊的ajax逻辑。看上著作权归作者所有,禁止商业用途转载。【作者:唐霜】去,这就像一个仓库,你不知道仓库里面怎么【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】运作的,但是你知道,凭借id就可以取数据【本文受版权保护】著作权归作者所有,禁止商业用途转载。。
【版权所有,侵权必究】原创内容,盗版必究。【转载请注明来源】
这样的取数据方式简直不要太舒服。相当于仓著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net库的提供者和代码的撰写者完全分开,业务代【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net码的撰写者完全不关心后台的api接口,只【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net关心仓库有没有提供一个id,可以获得我需著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net要的数据。
【本文受版权保护】【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net概念【作者:唐霜】
【本文首发于唐霜的博客】原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【转载请注明来源】原创内容,盗版必究。在使用DataBaxe进行深度开发的时候【本文受版权保护】转载请注明出处:www.tangshuang.net,我们还需要除了获取数据本身之外的功能所【未经授权禁止转载】本文作者:唐霜,转载请注明出处。需要的其他功能,我们还需要更深入的了解D著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】ataBaxe的设计逻辑。
【版权所有,侵权必究】转载请注明出处:www.tangshuang.net原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】数据源未经授权,禁止复制转载。
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】不可否认,本质上,我们还是要从后台的AP著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。I获取数据。而规定一个数据如何从API获【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】得的配置信息,就是“源”。同时,我们给这【作者:唐霜】原创内容,盗版必究。个源配置一个id号,这样,我们可以在获取【本文受版权保护】未经授权,禁止复制转载。对应的源的数据时,可以用这个id作为获取原创内容,盗版必究。【本文首发于唐霜的博客】的凭证。
著作权归作者所有,禁止商业用途转载。【转载请注明来源】【关注微信公众号:wwwtangshuangnet】而且,基于restful风格的api设计【未经授权禁止转载】转载请注明出处:www.tangshuang.net,使得源的设计也非常有意思,你可以为每一【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。个请求类型设计一个独立的源,也可以设计一【本文首发于唐霜的博客】【未经授权禁止转载】个共用的源并通过获取数据时传参数来决定进【本文受版权保护】本文作者:唐霜,转载请注明出处。行什么请求类型。这个技巧,我会在下文详细【本文首发于唐霜的博客】未经授权,禁止复制转载。解释。
【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。数据仓库【关注微信公众号:wwwtangshuangnet】
【原创不易,请尊重版权】【转载请注明来源】【转载请注明来源】著作权归作者所有,禁止商业用途转载。对于开发者而言,要取数据就从数据仓库取,【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】要更新数据,就往数据仓库塞。数据仓库里面【未经授权禁止转载】【原创不易,请尊重版权】保存着所有从api请求过来的数据,但是,【本文首发于唐霜的博客】【原创不易,请尊重版权】对于所有从数据仓库中获取数据的调用者,如【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】果每一次都要从api去请求数据,不仅速度本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net慢,而且短时间内所请求的数据是一样的,没【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。有必要再次请求。
本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。
databaxe是开发者和api接口之间【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。的中介
【作者:唐霜】原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。缓存未经授权,禁止复制转载。
转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【转载请注明来源】如何做到短时间内不必重复请求API呢?当著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。然是使用缓存。在一个请求发起之后,数据回著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】来之后,将回来的数据缓存起来,当发现新的本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net请求是请求的相同的数据时,就将缓存作为结【原创不易,请尊重版权】【作者:唐霜】果直接返回。问题在于,1.怎么保证请求的【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】唯一性;2.怎么确定缓存的时效性。我们通【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net过ajax请求的method、url和配本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】置信息来确定请求是唯一的。而且,对于一个【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。唯一确认的请求而言,所有使用databa【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netxe的调用方都是一样的,即使创建了多个d【本文首发于唐霜的博客】未经授权,禁止复制转载。atabaxe实例,它们之间也共享缓存。【本文受版权保护】本文版权归作者所有,未经授权不得转载。而缓存的时效性则根据每个实例配置的exp【未经授权禁止转载】【原创不易,请尊重版权】ire选项来确定。
【本文受版权保护】【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。【转载请注明来源】本文版权归作者所有,未经授权不得转载。但需要注意的一点是,expire不会致使【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】缓存销毁。expire仅仅是决定是否要使著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net用缓存。也就是说,一个数据源的缓存,一旦转载请注明出处:www.tangshuang.net【转载请注明来源】生成之后,只会被新数据替换,而不会被销毁本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。。这样的设计,确保了每一次get都能得到本文版权归作者所有,未经授权不得转载。【作者:唐霜】数据。在缓存过期的情况下,新的ajax会本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。发出,但是倘若这个请求失败,那么缓存还是【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net会被使用,也就是说,任何情况下,get都【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net能给你想要的结果。这是一个巧妙的设计,让转载请注明出处:www.tangshuang.net【作者:唐霜】你的应用可以做到更好的可用性。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。【本文受版权保护】由于缓存的存在,使得databaxe的调原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net用方在请求数据时极其的快。同时,开发者可转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】以根据需要,选择缓存的存储介质,可以是临【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】时的内存变量,也可以使用localSto【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。rage持久化数据,还可以使用Hello著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。IndexedDB等其他拥有Storag本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】e API的存储方式。
未经授权,禁止复制转载。【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。响应式设计【版权所有】唐霜 www.tangshuang.net
转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。只有前面所提到的东西,不足以让datab未经授权,禁止复制转载。转载请注明出处:www.tangshuang.netaxe与众不同,真正让databaxe出【未经授权禁止转载】转载请注明出处:www.tangshuang.net人意料的,是响应式设计。在databax本文作者:唐霜,转载请注明出处。原创内容,盗版必究。e的使用中,你可以通过subscribe【本文首发于唐霜的博客】【版权所有,侵权必究】方法,对某个id的数据进行观察,当这个数本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net据发生变化(从api拉回新数据之后),传【版权所有,侵权必究】【原创不易,请尊重版权】入的回调函数会被执行。这样一来,不同的调【未经授权禁止转载】原创内容,盗版必究。用方,在同一个数据发生变化的时候,都可以【转载请注明来源】原创内容,盗版必究。按照自己的需要进行响应。
【作者:唐霜】【作者:唐霜】未经授权,禁止复制转载。【原创不易,请尊重版权】更为奇妙的是,基于内部的依赖收集原理,和本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netautorun方法,在某些函数内用get【作者:唐霜】【版权所有,侵权必究】获取了数据,而当对应的数据发生变化时,该【本文首发于唐霜的博客】【本文首发于唐霜的博客】函数会被自动重新执行一次,这非常适用于某【本文受版权保护】【本文首发于唐霜的博客】些界面渲染的场景。这也会在下文详细举例。
原创内容,盗版必究。【未经授权禁止转载】原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】数据源本文版权归作者所有,未经授权不得转载。
【作者:唐霜】【版权所有,侵权必究】【原创内容,转载请注明出处】数据源用于决定一个数据从哪个api接口获【本文首发于唐霜的博客】【转载请注明来源】取数据,或将数据提交到哪个接口。
本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。之所以在实例化配置之前讲数据源,是因为,【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】数据源可以单独于databaxe而存在,【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】它可以是一种协议,可以用于所有支持这种协本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】议的数据管理工具。databaxe只是使【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。用了这些数据源配置,并按照自己的逻辑实现本文作者:唐霜,转载请注明出处。【转载请注明来源】了数据管理。你甚至可以自己发明一套逻辑,著作权归作者所有,禁止商业用途转载。【本文受版权保护】来使用这些数据源。
【作者:唐霜】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】本文作者:唐霜,转载请注明出处。在一个项目中,将数据源抽离出来,有利于统【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】一管理数据源,对于后台api的任何变化,【作者:唐霜】转载请注明出处:www.tangshuang.net都可以通过数据源的代码了解到。更有意思的本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】是,数据源配置的源代码,即是api接口的【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】文档,一个接口需要什么参数,都可以通过数【本文首发于唐霜的博客】【本文首发于唐霜的博客】据源的配置信息了解到。
【作者:唐霜】【转载请注明来源】【转载请注明来源】著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】数据源配置【版权所有,侵权必究】
【转载请注明来源】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】一个数据源的配置信息如下:【版权所有】唐霜 www.tangshuang.net
本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。【作者:唐霜】{
id: 'xxx', // 作为该数据源的身份凭证
url: 'xxx', // 作为数据源的目标api地址,URL支持插值的方式提供占位符,在真正请求数据时再传入插值替代值,当url以http(s)://开头时,直接作为目标地址,如果不是,则会与配置中的baseURL连接
options: { // 请求配置信息,databaxe内部使用axios作为ajax请求的库,options将作为请求这个接口时传的请求配置信息的基础信息
method: 'GET',
},
transform: function(data) { // 数据从仓库出来时,数据从store中取出后,通过这个函数进行转化,get的最终结果是transform的结果。需要注意的是,store.stringify为false时,transform不能直接修改data本身,而应该克隆一份后进行修改。
return Object.assign({}, data, { is: true })
// 建议,transform是一个纯函数,不产生任何副作用
},
take: function(res) { // 数据从api返回时,将通过take函数兜住整个响应数据,让你可以对响应数据进行修改。注意,缓存中将存储take编辑后的结果,因此,要特别小心,因为编辑后的数据会被其他实例使用。
//建议,take是一个纯函数,主要用于对api返回的数据类型和结构进行检查,你可以搭配hello-type使用
},
}
之所以将一个数据的请求信息提炼出来,是为本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。了让数据源可管理性更强。你可以单独使用一【作者:唐霜】【原创不易,请尊重版权】个模块来存放所有和项目相关的数据源,而当【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】后台的api发生变化时,只需要修改数据源转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。即可,而不需要对业务代码进行任何的修改。
本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】原创内容,盗版必究。原创内容,盗版必究。本文作者:唐霜,转载请注明出处。URL插值原创内容,盗版必究。
著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net数据源配置的URL中支持插值,这是一个重【转载请注明来源】本文版权归作者所有,未经授权不得转载。要的特性,因为几乎大部分数据都需要根据实【作者:唐霜】【原创不易,请尊重版权】际的数据信息才能获取到。而在缓存时,这些转载请注明出处:www.tangshuang.net【版权所有,侵权必究】特征都被收集起来,也就是说,不会出现不同【原创不易,请尊重版权】【本文首发于唐霜的博客】的数据资源混用了缓存的情况。
【本文受版权保护】未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net// url配置为 `/api/v2/users/{userId}`
// 当获取某个用户的详情时,可以
dbx.get('user_by_id', {
fields: { userId: '12345566' }
})
// 在get方法的第二个参数中传入feilds,用来替换掉url中的插值
这样,使得datasource的灵活性大著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。大增强。而一个数据源,在请求的时候,ur【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】l不同,searchquery不同,po原创内容,盗版必究。【作者:唐霜】stdata不同,都代表着不同的数据结果本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】,在缓存时,databaxe会完全考虑到转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】了这些,因此,当你的get的第二个参数和【版权所有,侵权必究】【转载请注明来源】url一起搭配着决定了缓存的标志。这让缓【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】存不会出现任何错误。
本文作者:唐霜,转载请注明出处。原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】transform【版权所有,侵权必究】
【作者:唐霜】【版权所有,侵权必究】【原创内容,转载请注明出处】transform函数用于在当你从仓库中【原创不易,请尊重版权】【作者:唐霜】取出数据之前,对将要取出的数据进行一次转本文作者:唐霜,转载请注明出处。原创内容,盗版必究。化。之所以这样设计,是因为,对于后台ap【转载请注明来源】著作权归作者所有,禁止商业用途转载。i返回的结果而言,前端可能需要根据自己的原创内容,盗版必究。转载请注明出处:www.tangshuang.net需求而进行调整,不能单纯直接使用后台ap著作权归作者所有,禁止商业用途转载。【转载请注明来源】i返回的结果。这个时候,可以通过tran【本文首发于唐霜的博客】【原创不易,请尊重版权】sform来对数据进行转换。
本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。使用transform需要注意两点:本文版权归作者所有,未经授权不得转载。
本文作者:唐霜,转载请注明出处。【转载请注明来源】【版权所有,侵权必究】- transform会在每次get的时候生【原创内容,转载请注明出处】【版权所有,侵权必究】效,transform的结果不会被缓存(原创内容,盗版必究。【转载请注明来源】今后会考虑采用reselect的方式对t【本文首发于唐霜的博客】未经授权,禁止复制转载。ransofrm结果进行缓存),这也就是【未经授权禁止转载】【转载请注明来源】说,transform会在每次取数据时执【本文受版权保护】【未经授权禁止转载】行,倘若trasnform消耗了太多性能【转载请注明来源】【未经授权禁止转载】,显然是不明智的,因此,它仅适用于对数据【作者:唐霜】著作权归作者所有,禁止商业用途转载。结构之类的简单处理,而不应该将大型的运算【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。加入其中。 转载请注明出处:www.tangshuang.net【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】
- trasnform不可对传入的原始数据进【作者:唐霜】转载请注明出处:www.tangshuang.net行修改(除非你使用localStorag【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。e/indexedDB等本地存储),否则【原创不易,请尊重版权】【本文受版权保护】,它会直接对缓存产生副作用,造成后续数据【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net错误。因此,transform必须是纯函本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。数,和redux的reducer一样,不著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net可以在内部对输入进行修改。 【版权所有,侵权必究】【未经授权禁止转载】【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】
之所以缓存的不是transform的结果【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net,是因为所有数据源在所有实例之间都是共享转载请注明出处:www.tangshuang.net【作者:唐霜】的,也就是说,后台api返回的数据,不一未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】定仅被当前这个trasnform转换,还未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net可能会被其他实例的transform转换【版权所有,侵权必究】未经授权,禁止复制转载。。所以,缓存必须保存api返回的原始结果本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。,这样才能保证每一个transform得【本文首发于唐霜的博客】【原创不易,请尊重版权】到的源数据是一致的。
本文作者:唐霜,转载请注明出处。原创内容,盗版必究。【版权所有,侵权必究】【版权所有,侵权必究】而transform为纯函数,是将来内置【未经授权禁止转载】【原创内容,转载请注明出处】transform结果缓存的基础,也就是【作者:唐霜】【未经授权禁止转载】说,在以后的版本中,我会直接把trans【本文受版权保护】【本文受版权保护】form的结果也缓存起来,这样可以更提高本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。性能。
【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。take转载请注明出处:www.tangshuang.net
原创内容,盗版必究。【作者:唐霜】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。take函数在数据从api返回给data【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netbaxe时被调用,它会兜住整个respo未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。nse信息。之所以要在数据返回时提供一个本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】兜住的功能,是为了方便开发者根据返回的r未经授权,禁止复制转载。【原创不易,请尊重版权】esponse来决定该返回结果是否合法。
【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】可以说,take的唯一功能,就是校验数据【转载请注明来源】转载请注明出处:www.tangshuang.net是否合法,你不可以在take中修改数据本【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。身,否则会造成严重的数据污染问题,所有实【原创内容,转载请注明出处】【本文首发于唐霜的博客】例之间共享了同一个datasource的【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。数据,一旦你在某一个实例的take中修改本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】数据,那么其他实例就会使用错误的数据。
【关注微信公众号:wwwtangshuangnet】【本文受版权保护】【本文受版权保护】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。一个校验的技巧是,当你在take中抛出错【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】误时,相当于数据请求就会失败,返回的数据【版权所有,侵权必究】未经授权,禁止复制转载。不会写入到缓存中。
转载请注明出处:www.tangshuang.net【作者:唐霜】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net{
take: function(res) {
if (res.data.error) {
throw new Error(res.data.error)
}
}
}
上面这段代码,在take中使用了thro【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。w error,这样可以在后台返回的数据【本文首发于唐霜的博客】【原创不易,请尊重版权】有问题的时候,防止把错误的数据写入到缓存【作者:唐霜】著作权归作者所有,禁止商业用途转载。中。而且,在这种情况下,get仍然能正常【版权所有,侵权必究】【原创内容,转载请注明出处】返回数据,只不过使用的是缓存结果而已。
著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】【版权所有,侵权必究】实例化配置原创内容,盗版必究。
转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net我们在项目中,创建一个databaxe的原创内容,盗版必究。【本文首发于唐霜的博客】实例,需要用到的配置。
本文版权归作者所有,未经授权不得转载。【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】配置详解本文作者:唐霜,转载请注明出处。
【版权所有,侵权必究】原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】databaxe的配置看情况,基础用法配转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】置很简单,但是如果想使用更加丰富的功能,本文版权归作者所有,未经授权不得转载。【本文受版权保护】可以进行比较复杂的配置。
著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。{
debug: false, // 是否启用调试工具,启用后当出现一些问题时,可以在控制台看到错误输出
expire: 0, // 缓存的过期默认时间,0:永不过期,负数:不使用缓存,正数:过期时间。expire会被单个datasource的expire选项覆盖
debounce: 0, // save方法提交时的延迟时间,当一个save方法被触发时,它不会马上将数据提交到后端,而是等待debounce结束,当在debounce时间内新的save被触发,那么会发生两件事:
// 1. 新提交的save的数据,会合并到当前的数据中,后面提交的数据字段会覆盖之前的字段值
// 2. debounce的时间重置,等到结束后才会再次提交
// 注意:debounce的最小值为10
store: { // 数据持久化配置信息,databaxe内部使用hello-storage作为缓存的库,store将作为配置信息传入
namespace: 'databaxe',
storage: localStorage,
stringify: true, // 默认为false
},
options: { // 数据请求的默认配置,databaxe使用axios作为内置的数据请求工具,options会被作为axios的默认配置,当发起一个get或save时,传入的options会与默认options合并
baseURL: '',
},
onInit: null,
onRegister: null,
onUpdate: null,
onRequest: null,
onResponse: null,
}
const configs = {
expire: 10000, // 10秒缓存
}
const dbx = new DataBaxe(configs)
存储介质【本文首发于唐霜的博客】
本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。databaxe缓存的存储介质是多选的,本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net通过store这个配置,可以决定data原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】baxe实例的一些行为方式。比如,默认情【本文受版权保护】【本文首发于唐霜的博客】况下,databaxe不同实例之间,同一著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net个数据是共享的,但是,有的时候,你想某个【本文首发于唐霜的博客】【原创内容,转载请注明出处】实例数据独享,怎么办?只需要去修改sto【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。re.namespace即可,通过开设一【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。个独立的命名空间的存储区域,就可以做到数本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】据独享。(默认所有的databaxe实例【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。的存储空间都是名为databaxe的na【转载请注明来源】著作权归作者所有,禁止商业用途转载。mespace。)再比如,你想使用loc【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】alStorage作为存储介质,使数据可未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。以持久化。也通过配置store来实现。现【版权所有,侵权必究】【原创不易,请尊重版权】在,就详细对存储介质配置进行解释。
本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】databaxe的存储介质是由用户自己配转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】置的,关键是怎么配置呢?这你就要了解一下本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。hello-storage了。 它是一个【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net非常有用的存储脚手架,它本身也提供Sto【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。rage API接口,作为临时的共享内存【转载请注明来源】未经授权,禁止复制转载。存储介质。共享内存存储,说白了,就是变量【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。存储,一刷新页面,就消失了。它的最主要功【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】能是适配各种存储方式,只要一个存储介质支【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】持Storage API,就可以用hel本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】lo-storage来管理。所谓的Sto著作权归作者所有,禁止商业用途转载。【作者:唐霜】rage API,是web标准的API,【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】主要支持个体getItem, setIt转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】em, removeItem等接口,而且【版权所有,侵权必究】【原创不易,请尊重版权】非标准的一些扩展,还支持直接存储obje【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】ct,而不是把对象序列化之后才能存储。我本文作者:唐霜,转载请注明出处。【转载请注明来源】撰写的hello-indexeddb这个转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。工具,还能把indexedDB转化为拥有著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。标准Storage API的对象,也可以【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】作为存储介质传给hello-storag【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】e。
未经授权,禁止复制转载。未经授权,禁止复制转载。【本文首发于唐霜的博客】hello-storage的使用方法也是【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net根据实际情况而不同,最简洁的时候不需要传【作者:唐霜】【转载请注明来源】入任何参数就可以马上使用。例如:
【转载请注明来源】【转载请注明来源】原创内容,盗版必究。【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。const store = new HelloStorage()
store.set('key', { a: 1 })
let obj = store.get('key')
就是这么简单。但是,由于HelloSto【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。rage的设计是为了接近快速使用Stor著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】age API,而前端的Storage都【转载请注明来源】【作者:唐霜】是共享的,例如localStorage,【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。两个应用程序,在一个域名下面,操作相同的【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】key,实际上会操作相同的一个数据。因此【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net,为了避免这种情况,实现独享存储,我给h【原创不易,请尊重版权】【本文首发于唐霜的博客】ello-storage增加了names【原创不易,请尊重版权】转载请注明出处:www.tangshuang.netpace选项,通过namespace,你本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。可以使得具有相同namespace的存储本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】介质为独享的。例如:
【未经授权禁止转载】本文作者:唐霜,转载请注明出处。原创内容,盗版必究。转载请注明出处:www.tangshuang.netconst store1 = new HelloStorage({ namespace: 'store1' })
const store2 = new HelloStorage({ namespace: 'store2' })
这样,store1, store2则会各原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。自独享存储空间,不会引起set同一个ke【本文首发于唐霜的博客】【原创内容,转载请注明出处】y的时候,相互干扰。
本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。【作者:唐霜】但是需要注意的是,如果两个hello-s【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】torage的实例具有相同的namesp著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.netace,那么它们两个又会共享存储。也就是【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。说,namespace决定了你会使用哪一转载请注明出处:www.tangshuang.net【本文受版权保护】块存储介质。
【版权所有】唐霜 www.tangshuang.net【作者:唐霜】【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。回到databaxe中,配置中store本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】选项就是传入HelloStorage构造【版权所有,侵权必究】未经授权,禁止复制转载。函数的参数,因此,如果你希望某个data转载请注明出处:www.tangshuang.net【作者:唐霜】baxe实例独立一个存储空间,可以设置自本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】己的store.namespace。默认【转载请注明来源】【原创不易,请尊重版权】情况下,databaxe使用的names本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】pace为’databaxe【本文受版权保护】原创内容,盗版必究。’。
本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net在HelloStorage中,如果我想使【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】用localStorage或者sessi【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。onStorage,只需要在参数选项中配转载请注明出处:www.tangshuang.net原创内容,盗版必究。置storage这个选项:
原创内容,盗版必究。【转载请注明来源】【本文首发于唐霜的博客】【转载请注明来源】const store = new HelloStorage({
storage: localStorage,
stringify: true, // localStorage要求对象序列化为字符串后存储,这个选项的默认值是true,所以可以不传
async: false, // async为true时,整个实例切换为异步模式,在storage本身是异步的情况下,async必须设置为true,否则会导致错误
})
store.set('key', { key: value })
非常简单吧。配置中,storage, s【未经授权禁止转载】【原创内容,转载请注明出处】tringify, async这三个选项本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。需要搭配,因为不同的存储介质这三个选项都原创内容,盗版必究。【本文首发于唐霜的博客】不一样。例如,react native的转载请注明出处:www.tangshuang.net【本文受版权保护】AsyncStorage,就要求asyn【本文首发于唐霜的博客】【本文首发于唐霜的博客】c这个选项必须是true,因为它是异步的【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。。一旦启用async之后,整个Hello【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】Storage都会切换为异步模式。如果你【本文受版权保护】【作者:唐霜】使用HelloIndexedDB,asy【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netnc必须为true,stringify可【版权所有,侵权必究】原创内容,盗版必究。以为false,因为indexedDB可【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。以存储js对象。
【版权所有,侵权必究】【作者:唐霜】【转载请注明来源】【转载请注明来源】原创内容,盗版必究。回到databaxe,如果我想使用ind【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。exedDB作为存储介质,应该怎么办么?本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。只需要修改store这个配置项即可。
【转载请注明来源】【本文受版权保护】【未经授权禁止转载】未经授权,禁止复制转载。import HelloIndexedDB from 'hello-indexeddb'
const storage = new HelloIndexedDB()
const dbx = new DataBaxe({
store: {
storage,
stringify: false,
}
})
这样就可以使用indexedDB作为da原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。tabaxe的存储介质了。
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【原创内容,转载请注明出处】【本文首发于唐霜的博客】由于DataBaxe内所有的操作都是异步未经授权,禁止复制转载。【原创不易,请尊重版权】的,因此,store的async参数被强【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】制设置为true,你自己传入的async【作者:唐霜】【本文受版权保护】配置失效。
本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】【本文受版权保护】同样的道理,一旦你掌握了hello-st著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】orage,那你可以很轻松的选择不同的存【未经授权禁止转载】【本文受版权保护】储介质来存储databaxe的缓存,甚至本文作者:唐霜,转载请注明出处。【作者:唐霜】你可以自己构造存储介质,只要该介质拥有标【原创不易,请尊重版权】原创内容,盗版必究。准的Storage API即可。
【本文受版权保护】转载请注明出处:www.tangshuang.net【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【本文受版权保护】默认情况下,使用的是HelloStora【未经授权禁止转载】【作者:唐霜】ge提供的内存存储,它是运行时的,因此一本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】刷新页面,数据就没有了,而且,它和当前j本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】s线程是共享的,所以对缓存数据直接修改会【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】导致问题,因此,千万不要在默认情况下,直【原创内容,转载请注明出处】原创内容,盗版必究。接修改缓存数据,以及直接从缓存中取出来的【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。数据,这也是为什么要求transform【未经授权禁止转载】【版权所有,侵权必究】是纯函数的原因。
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【未经授权禁止转载】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net
databaxe数据源架构示意图【关注微信公众号:wwwtangshuangnet】
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】【未经授权禁止转载】【本文受版权保护】在一个应用中,可以实例化多个databa未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】xe实例,而这些实例可以使用相同的dat本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netasource,但也可以使用不同的dat本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。asource,还可以一部分共享,一部分【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。自己创建。databaxe实例可以共享一【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。个storage,也可以使用不同的,比如【本文受版权保护】未经授权,禁止复制转载。,其中一个使用localSotrage,【原创不易,请尊重版权】原创内容,盗版必究。另外一个使用indexedDB。假如两个著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】databaxe实例共享了一个stora转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】ge,那么他们会共享同一个请求的数据。所转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】谓的同一个请求,是通过请求的url,再加原创内容,盗版必究。转载请注明出处:www.tangshuang.net上options信息,得到的一个对象得到【版权所有,侵权必究】原创内容,盗版必究。的指纹相同的请求。
本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】【作者:唐霜】API【原创不易,请尊重版权】
本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】【本文首发于唐霜的博客】对于DataBaxe的使用,如果不需要特著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。殊功能,其实非常简单,例如,仅仅把它当作本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】一个待缓存的数据请求工具,只需要一个注册【转载请注明来源】著作权归作者所有,禁止商业用途转载。,和一个获取即可。而如果需要更丰富的功能【本文首发于唐霜的博客】【本文受版权保护】,则需要详细的阅读下面的api。
【本文受版权保护】原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netregister著作权归作者所有,禁止商业用途转载。
著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net原创内容,盗版必究。注册数据源。它是一个async函数,可以【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】使用await处理。
【转载请注明来源】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。【转载请注明来源】- datasources 数据源对象列表,【未经授权禁止转载】【未经授权禁止转载】可以是一个数组,当只传入一个数据源的时候未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。,可以直接传,不必放在数组中 原创内容,盗版必究。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】本文版权归作者所有,未经授权不得转载。
dbx.register({
id: 'user_by_id',
url: '/api/users/{uid}',
})
get【版权所有,侵权必究】
【转载请注明来源】【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。从databaxe获取数据。它是一个as【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netync函数。
【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】- id 某个数据源注册的时候传入的id【未经授权禁止转载】 原创内容,盗版必究。转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】
- options 请求时所需要的optio【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ns,作为axios的第二个参数
- fields options.field【未经授权禁止转载】【未经授权禁止转载】s将作为替换url中的差值的参数,在作为转载请注明出处:www.tangshuang.net【版权所有,侵权必究】axios参数时,会从options中删【未经授权禁止转载】【原创不易,请尊重版权】除 本文版权归作者所有,未经授权不得转载。【作者:唐霜】本文版权归作者所有,未经授权不得转载。
【作者:唐霜】本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】未经授权,禁止复制转载。
- force 是否强制跳过缓存,从服务器获本文版权归作者所有,未经授权不得转载。【转载请注明来源】取最新的数据,默认为false,强制获取本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。后,本地的缓存会被更新 【本文受版权保护】本文作者:唐霜,转载请注明出处。原创内容,盗版必究。
const user = await dbx.get('user_by_id', {
fields: {
uid: 123922,
},
})
subscribe【版权所有,侵权必究】
【转载请注明来源】未经授权,禁止复制转载。【本文受版权保护】未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】对某个数据源获取到新数据的事件订阅。ca【原创内容,转载请注明出处】【版权所有,侵权必究】llback会在get发起新请求,更新本【转载请注明来源】【版权所有】唐霜 www.tangshuang.net地的缓存之后被触发。
未经授权,禁止复制转载。【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net- id 某个数据源的id【访问 www.tangshuang.net 获取更多精彩内容】 【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【本文首发于唐霜的博客】【本文受版权保护】
- callback(data, optio原创内容,盗版必究。【本文受版权保护】ns) 当对应的本地缓存被更新后触发的函【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】数
- data 更新后的数据未经授权,禁止复制转载。 本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。
- options get的时候传入的opt转载请注明出处:www.tangshuang.net【本文受版权保护】ions,全等 未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【原创内容,转载请注明出处】【版权所有,侵权必究】
【作者:唐霜】本文作者:唐霜,转载请注明出处。【作者:唐霜】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net
- priority 一个id可以被subs著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。cribe多个callback,通过pr【作者:唐霜】【作者:唐霜】iority规定这些callbacks的本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。执行顺序,默认priority是10 原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】【本文受版权保护】
async function render() {
const users = await dbx.get('users')
// 利用users渲染界面
}
dbx.subscribe('users', render)
render()
上面这段代码,当’users【本文受版权保护】【本文受版权保护】’这个id的数据源对应的缓存本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】发生变化之后,render函数会被再次执【作者:唐霜】【关注微信公众号:wwwtangshuangnet】行,这样可以起到重新渲染界面的效果。
【作者:唐霜】【原创不易,请尊重版权】【作者:唐霜】【本文受版权保护】需要注意的是,由于databaxe的缓存【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】在一定条件下是共享的,因此,即使另外一个【转载请注明来源】未经授权,禁止复制转载。databaxe的实例也使用了和R【转载请注明来源】【转载请注明来源】17;users’这个数据源本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。一模一样的请求时,当那个实例请求数据更新【本文受版权保护】著作权归作者所有,禁止商业用途转载。了这个相同请求的缓存时,render函数原创内容,盗版必究。【原创内容,转载请注明出处】也会被触发。这种设计让开发者少写很多代码未经授权,禁止复制转载。【原创不易,请尊重版权】,例如在两个组件中,使用了各自不同的数据【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net源,然而,这两个数据源发出了相同的请求(【原创不易,请尊重版权】【转载请注明来源】指纹相同),那么它们的数据是共享的,su【关注微信公众号:wwwtangshuangnet】【转载请注明来源】bscribe也会跨组件被触发。
【本文受版权保护】【未经授权禁止转载】【作者:唐霜】因此,在开发的时候,一定要注意,这一点,本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】因为相同的请求URL+参数可能会触发缓存【本文受版权保护】本文作者:唐霜,转载请注明出处。更新,进而触发subscribe的回调函原创内容,盗版必究。原创内容,盗版必究。数。而由于不同的实例里,配置的expir【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.nete的值不同,会导致缓存的更新频率不同。比【转载请注明来源】原创内容,盗版必究。如,组件A的expire是10,而组件B【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。的expire是20,如果组件B通过su【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。bscribe订阅了,那么在同一个缓存被【转载请注明来源】【版权所有,侵权必究】组件A的过期触发时,也会同时触发组件B的【本文受版权保护】【本文首发于唐霜的博客】观察者,所以两个组件对应的观察者函数会被著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。一起执行。在使用的时候,要特别注意这一点【转载请注明来源】本文版权归作者所有,未经授权不得转载。。
【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】【本文受版权保护】【转载请注明来源】unsubscribe原创内容,盗版必究。
未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】未经授权,禁止复制转载。subscribe的反函数,取消对数据源本文作者:唐霜,转载请注明出处。【本文受版权保护】数据变化的订阅。
原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】- id 数据源id【本文首发于唐霜的博客】 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【本文受版权保护】
- callback 要取消的callbac著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。k,当不穿时,表示取消所有id对应的ca【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】llbacks 【转载请注明来源】著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】
save未经授权,禁止复制转载。
【转载请注明来源】【转载请注明来源】【转载请注明来源】往服务端发送数据。【本文受版权保护】
【转载请注明来源】【未经授权禁止转载】【转载请注明来源】【转载请注明来源】在databaxe里面,数据源的配置很有【本文受版权保护】【原创内容,转载请注明出处】意思,你可以在数据源的options配置【原创不易,请尊重版权】原创内容,盗版必究。中,直接规定这个数据源的请求方式。get转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】主要是从服务端拉取数据,save则是反向【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】往服务端发送数据。因此,get仅支撑GE原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。T, POST, HEADERS, OP【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】TIONS这几种请求方式,save则仅支【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】撑POST, PUT, PATCH, D本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ELETE这几种。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【作者:唐霜】get中支持POST也是根据实际情况而支【作者:唐霜】本文作者:唐霜,转载请注明出处。持的,因为在一些特殊的场景下,某些系统会【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】使用POST发送一大堆参数去查询数据,因【原创内容,转载请注明出处】【原创内容,转载请注明出处】此,需要在数据源配置和get的optio【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】ns中搭配好使用。
原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】- id 数据源id未经授权,禁止复制转载。 【关注微信公众号:wwwtangshuangnet】【转载请注明来源】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。
- data 要发送的数据,options.未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。method为DELETE时无效 【转载请注明来源】【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】
- options 请求时做为axios参数【版权所有】唐霜 www.tangshuang.net【转载请注明来源】,options.data无效,opti原创内容,盗版必究。转载请注明出处:www.tangshuang.netons.fields不会被axios使用 【版权所有,侵权必究】【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。
await dbx.save('users', { uid: 1342455, user_name: 'xiaoming' })
save方法需要搭配settings.d原创内容,盗版必究。【本文受版权保护】ebounce使用,当save被触发之后转载请注明出处:www.tangshuang.net【版权所有,侵权必究】,不会立即发送数据,而是等待deboun原创内容,盗版必究。【版权所有,侵权必究】ce时间过去。而在这期间,假如save又【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】被触发,而且是同一个id,那么debou原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。nce会被重置,重新开始。而data会被【转载请注明来源】未经授权,禁止复制转载。合并,后面的字段会覆盖前一个对象的同名字【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net段。
【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。原创内容,盗版必究。await dbx.save('users', { uid: 1342455, user_name: 'xiaoming' })
await dbx.save('users', { uid: 1342455, sex: 'F' })
// 发送的数据是 { uid, user_name, sex }
settings.debounce的最小【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】值为10,即10毫秒。
【原创不易,请尊重版权】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】alias【版权所有】唐霜 www.tangshuang.net
【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。创建一个别名数据源。所谓别名数据源,是指【版权所有,侵权必究】未经授权,禁止复制转载。和上文所指的真正数据源有区别的替代性融合著作权归作者所有,禁止商业用途转载。【本文受版权保护】数据源。别名数据源可以包含一系列操作,然【本文受版权保护】【版权所有】唐霜 www.tangshuang.net后当作一个数据源一样,使用databax【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】e的get/save进行操作。
未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【未经授权禁止转载】【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】- id 数据源的id【原创不易,请尊重版权】 【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】
- fn 调用时执行的函数未经授权,禁止复制转载。 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。
- type 要用什么方法调用get/sav【原创不易,请尊重版权】【转载请注明来源】e,默认为get 本文作者:唐霜,转载请注明出处。【作者:唐霜】本文版权归作者所有,未经授权不得转载。
dbx.alias('user_book', function(options) {
return Promise.all([
this.get('user', { fields: { uid: options.fields.uid } }), // 可以使用this
this.get('book', { fields: { book_id: options.fields.book_id } }),
]).then(([user, book]) => {
return { user, book }
})
})
// 使用
let userBook = await dbx.get('user_book', { fields: { uid: 124422, book_id: 'xxx-xxx' } })
通过alias,你就可以把多个get/s【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ave操作合并为一个。
著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net【转载请注明来源】【转载请注明来源】【本文首发于唐霜的博客】alias所创建的别名数据源不支持sub【原创内容,转载请注明出处】原创内容,盗版必究。scribe,但是我们可以通过subsc【原创不易,请尊重版权】【原创内容,转载请注明出处】ribe原始数据源来达到同样的效果,获取【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】别名数据源时所触发的订阅仍然是有效的。因著作权归作者所有,禁止商业用途转载。【作者:唐霜】此,实际上仍然是响应式的。
【转载请注明来源】本文版权归作者所有,未经授权不得转载。【本文受版权保护】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。destory【版权所有,侵权必究】
【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】销毁实例,释放内存。【作者:唐霜】
【本文受版权保护】未经授权,禁止复制转载。【原创内容,转载请注明出处】autorun【转载请注明来源】
【转载请注明来源】转载请注明出处:www.tangshuang.net【版权所有,侵权必究】【本文受版权保护】这是一个神奇的方法,它可以自动收集一个函【原创不易,请尊重版权】原创内容,盗版必究。数内是否使用了某个数据源,倘若使用了,那【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。么当这个数据源发生变化时,自动重新执行这转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net个函数。
本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。原创内容,盗版必究。- fns 数组,要自动收集响应的函数列表【本文受版权保护】 【原创不易,请尊重版权】【版权所有,侵权必究】【作者:唐霜】
async functionn renderA() {
let data = await dbx.get('a')
// ...
}
async function renderB() {
let data = awiat dbx.get('b')
}
dbx.autorun([renderA, renderB]) // renderA和renderB都会被执行一次
autorun会执行一次被传入的函数,在【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】这一次执行过程中,收集到所有依赖,进而可【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。以在这些依赖发生变化时重新触发执行函数。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。autofree本文作者:唐霜,转载请注明出处。
著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。【本文受版权保护】autorun的反函数,是否autoru本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netn中传入的函数的监听。由于限制,auto【本文受版权保护】【本文受版权保护】run绑定的函数,必须通过autofre转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。e进行释放,否则会引起内存问题。
未经授权,禁止复制转载。原创内容,盗版必究。原创内容,盗版必究。- fns 数组,要解除的函数列表未经授权,禁止复制转载。 【未经授权禁止转载】【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。【转载请注明来源】本文作者:唐霜,转载请注明出处。
结语本文作者:唐霜,转载请注明出处。
未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】【本文受版权保护】转载请注明出处:www.tangshuang.netDataBaxe是这两年来,我经历的多次【转载请注明来源】本文作者:唐霜,转载请注明出处。迭代最终打磨出来的库。它的主要不同之处,著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】是把数据封装起来,像一个仓库一样,抹平了【未经授权禁止转载】本文作者:唐霜,转载请注明出处。不同组件、不同界面、不同程式之间的同源数【本文首发于唐霜的博客】【原创不易,请尊重版权】据问题,是数据请求上的一种创新。另外,它【本文受版权保护】著作权归作者所有,禁止商业用途转载。的响应式设计非常值得玩味,你可以通过我g【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。ithub上的演示代码,看具体的效果。通【原创内容,转载请注明出处】【原创内容,转载请注明出处】过响应式编程,你可以做到,在一个团队开发【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】的组件中使用了databaxe,另外一个【本文首发于唐霜的博客】【未经授权禁止转载】团队开发的另外一个组件中请求了数据,而更【未经授权禁止转载】未经授权,禁止复制转载。新前面一个组件的界面,但在代码上,两者完【作者:唐霜】【本文首发于唐霜的博客】全是隔绝的,甚至在开发的时候,两个团队完著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net全不知道对方的存在。
原创内容,盗版必究。【转载请注明来源】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。一个库的好坏,要到实践中才能得以检验。D【本文受版权保护】转载请注明出处:www.tangshuang.netataBaxe和HelloType被我内著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。置到几个自己写作的项目中,结合defer原创内容,盗版必究。【未经授权禁止转载】er-queue,可以让项目中的数据请求本文作者:唐霜,转载请注明出处。【转载请注明来源】,更具有健壮性。
【原创内容,转载请注明出处】【原创不易,请尊重版权】【本文首发于唐霜的博客】【未经授权禁止转载】如果你觉得本书对你有帮助,通过下方的二维码向我打赏吧,帮助我写出更多有用的内容。

2019-01-26