在我看来，前端数据问题分3个层次，分别是原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。：

• 原始数据请求
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。
• 数据请求抽象
【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【未经授权禁止转载】ang.net【本文首发于唐霜的博客】转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ng.net
• 数据源管理抽象
【原创不易，请尊重版权】【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【转载请注明来源】et 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ng.net

我们通过Restful API也好，we【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。bsocket也好，或者本地缓存也好，都【本文受版权保护】著作权归作者所有，禁止商业用途转载。可以获得一些数据。但这些数据的获取和使用著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，如何在项目中具有更优雅的设计，至今我还【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】没有看到满意的答案。我在《漫谈前端数据层》一文中提出，可以在前端借鉴数据仓库的概【转载请注明来源】【原创不易，请尊重版权】念，设计可以从我们常见的react数据请未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net求编码方式中解脱出来的方案。不过在那篇文本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】章中，对获取数据的这个环节的思考并不非常转载请注明出处：www.tangshuang.net【作者：唐霜】成熟。这篇文章表达我经过思考后，对这一问【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net题的最终解答。

我们常见的做法，有两种，一种比较原始，直【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。接在react组件中使用axios等库发【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。出请求，请求回来后通过setState把著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。数据拿来使用。另一种结合状态管理器，在独未经授权，禁止复制转载。【本文受版权保护】立的模块文件中，把相关的接口全部集中起来【作者：唐霜】【原创内容，转载请注明出处】，形成一堆基于axios的async函数原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。，并在状态管理器中调用这些函数，用到th【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】unk、saga之类的工具来实现状态异步【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net更新。这两种方式在我看来，都是原始方案。

所谓“原始”，就是直接按照ajax请求的未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。思维，把最底层的xhr通过一层封装暴露出【本文受版权保护】【版权所有，侵权必究】来，在使用时，需要遵循axios等库的细【未经授权禁止转载】【原创内容，转载请注明出处】节，思维层面仍然是发出xhr之后等待接口本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】返回结果的思维。它的问题在于，它只解决了【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ajax请求本身的问题，而如果你需要对数【原创不易，请尊重版权】【本文受版权保护】据进行处理、检查，或者对数据有什么要求，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。就需要自己解决。而之所以说“原始”，就是【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】因为解决这些数据问题，都是散落在各个组件原创内容，盗版必究。未经授权，禁止复制转载。内，或者集中在一个文件的async函数内【未经授权禁止转载】转载请注明出处：www.tangshuang.net，每个地方都有类似的痕迹。而使用的人在通本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】过浏览器devtool看数据时，并不清楚【作者：唐霜】【作者：唐霜】你真实处理成了什么数据。总而言之，原始数本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net据请求的方式，就是看上去好像有封装，本质本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。上和最早写xhr没有本质区别。

往上一层，我们要屏蔽这种底层的xhr编程著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。方式。也就是我们要抽象数据请求本身。这听转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net起来比较绕，但你一开始可以理解为，我们要本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。做一层封装，把xhr的那种请求方式隐藏起本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】来，让我们像做某种无感知的操作一样。我写【原创不易，请尊重版权】未经授权，禁止复制转载。了一个库专门做这一层，你可以了解一下我发著作权归作者所有，禁止商业用途转载。【作者：唐霜】明的这套ScopedRequestLanguag本文作者：唐霜，转载请注明出处。【未经授权禁止转载】e。它的核心思想是“把请求进行描述”。当你【未经授权禁止转载】本文作者：唐霜，转载请注明出处。看到“描述”这个词的时候，你往往就会把它本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net和“抽象”联系在一起。描述的内容总是静态本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。的，但是基于这些静态的东西，我们却可以一【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。眼了解关于该请求的细节，甚至在脑海中勾勒著作权归作者所有，禁止商业用途转载。【转载请注明来源】出一个场景发生时，具体将会出现什么状况。

我们用一个例子来解释。现在，我有这样一段【版权所有，侵权必究】【原创内容，转载请注明出处】描述：

GET "/api/xxx" -> {
  name: string;
  price: number;
  total: number;
}

你看，这段描述你是可以读懂的吧，我想但凡本文版权归作者所有，未经授权不得转载。【转载请注明来源】做过web开发的前后端程序员都能读懂这段【本文首发于唐霜的博客】原创内容，盗版必究。代码。它是讲“你用一个GET请求/api【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net/xxx接口时，将会得到一个含有name【原创不易，请尊重版权】【原创内容，转载请注明出处】, price, total字段的数据对本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net象“。我们基于描述来执行请求，演示代码如转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net下：

const data = await requester.run(`
  // 上面的描述文本
`)

我们通过抽象请求本身，把请求转化为描述文【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】本，进而实现屏蔽底层xhr请求的林林总总【原创不易，请尊重版权】【版权所有，侵权必究】。而描述的作用就非常多，除了能够准确的获本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】得需要的数据之外，它还可以被转化为用以检原创内容，盗版必究。【未经授权禁止转载】测后端接口是否按照既定规则给数据的检查器【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，也可以在前后端同学之间共同阅读，从而建【作者：唐霜】本文作者：唐霜，转载请注明出处。立起更好的沟通模式。

虽然通过描述我们屏蔽了底层发出请求的细节【转载请注明来源】转载请注明出处：www.tangshuang.net，然而，这远远不够，因为它在屏蔽底层细节本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net的时候，并没有屏蔽数据请求这个过程。

再往上一层，我们要屏蔽数据请求过程本身。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net我们要抽象的，是数据源本身。前端消费数据转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，虽然大部分来自Restfull API【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。，但时常也需要从localStorage【本文首发于唐霜的博客】【作者：唐霜】等其他地方拉取数据。单从从API请求数据本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】而言，我们仍然需要谨慎的理解，“数据是不【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。是还在请求？”，“数据回来了吗？”，“后未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】端是不是出问题了？”等等类似的问题。我们著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。要做的，就是屏蔽这些问题。

我们把数据源进行抽象后，对于数据的消费者【版权所有】唐霜 www.tangshuang.net【作者：唐霜】，也就是业务代码的撰写者，思维上是消费数著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。据，而不是请求数据。两个字的差别，就是一【本文受版权保护】【本文首发于唐霜的博客】次思维上的飞跃。我们把数据源抽象为一个看著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】不到内部细节的球，现在，我们要消费数据，【未经授权禁止转载】未经授权，禁止复制转载。于是我们向球说“我要你的数据”，于是它就【本文受版权保护】本文版权归作者所有，未经授权不得转载。把数据给你了。至于它的数据来自哪里，你并【原创不易，请尊重版权】【版权所有，侵权必究】不需要关心，它向你屏蔽了数据请求的细节。

我们还是用代码来举例，假如我们现在有一个未经授权，禁止复制转载。【本文受版权保护】数据源叫做ProjectDataSource ，现在我们要消费这个数据源的数据，我们本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】只需要：

const data = dataRepo.get(ProjectDataSource)

此时，你得到的data就是你需要的数据。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】你可能会想“咦，我没看到你请求数据呀？你【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】这个数据准不准确哦？”。这是你在用上一层【本文受版权保护】本文版权归作者所有，未经授权不得转载。的思维思考问题。你现在需要升级你的思维，未经授权，禁止复制转载。【未经授权禁止转载】你不要关心数据源内部的数据是怎么来的，就【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】是是上帝说要有数据然后就凭空出现了数据，【原创不易，请尊重版权】【未经授权禁止转载】你也不要关心。你要关心的是，它给的数据，【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。是否是按照我们的约定来给的，此时，你需要本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。用上typescript。

const data: IProjectData = ...

也就是说，对于你来说，只要它给你的数据符原创内容，盗版必究。【本文受版权保护】合你对数据类型的要求，那么你管他数据是哪【本文受版权保护】原创内容，盗版必究。里来的，你就认为这数据是合法的就好了，至【本文受版权保护】未经授权，禁止复制转载。于数据的准确性，你需要交给提供数据源的抽【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】象引擎来做。这个抽象引擎解决你所考虑的所【版权所有，侵权必究】【版权所有，侵权必究】有问题。而你只需要消费这个数据即可。

好了，现在，让我们进入到球的内部，看看球【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】里面到底发生着什么。

一个数据源的建立，最底层，还是要走aja【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netx那一套，只是说，我们这些底层的东西，被未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。提前封印在球内了。球内代码大致如下：

const defaultValue: IProjectData = { ... }
const ProjectDataSource = dataRepo.source(async () => {
    const data: IProjectData = await requester.run(`
        // 上面的描述文本
    `)
    return data
}, defaultValue)

我们用上了第二层的抽象。但是它只负责请求【未经授权禁止转载】本文作者：唐霜，转载请注明出处。的部分，而构成数据源的，除了请求，实际上转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】还可以加入其他很多东西，例如缓存，你可以【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。在第一个函数中加入一些缓存的逻辑，你也可原创内容，盗版必究。【版权所有，侵权必究】以在这里对数据进行检查和提示。同时，它的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。第二个参数是默认值，就像 [state,【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net setState] = useStat【转载请注明来源】原创内容，盗版必究。e(0) 在默认状态时为0一样，这个默认转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net值保证了数据源在没有发出请求时，也是可用本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。的，不会对界面造成破坏。

我在几年前写了一个叫databaxe的库，专门去做类似的数据源管理，前年在思【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。考了很久之后，写了一个叫algeb的库，借鉴hooks的思维重新整理了这一转载请注明出处：www.tangshuang.net原创内容，盗版必究。整套数据源管理的逻辑。你可以通过这个库的未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。思想，去窥探这一层次的内容。数据请求和数转载请注明出处：www.tangshuang.net原创内容，盗版必究。据管理是两码事，你一定要把他们分开，在你原创内容，盗版必究。本文作者：唐霜，转载请注明出处。的项目中，应该更看重数据管理，因为数据管本文作者：唐霜，转载请注明出处。【作者：唐霜】理的方式会通过抽象，屏蔽它底层的请求细节【转载请注明来源】著作权归作者所有，禁止商业用途转载。，让你的开发，具有“将不同的对象串联起来【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net“的特征。

这就是我关于前端数据源的一些思考。当然，【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。其实还有一点比较重要，就是你需要把3层的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net东西，结合到你的项目中去使用，而不是独立未经授权，禁止复制转载。【本文受版权保护】于你项目之外运行。我在我们项目中深度实践【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net了这种抽象和整合，你可以关注本专栏，或者【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net我的微信wwwtangshuangnet【原创不易，请尊重版权】未经授权，禁止复制转载。，通过我后续的文章了解相关的内容。