[Web] mobx 异步操作
2023-09-14 08:56:58 时间
转载自:https://www.jianshu.com/p/66dd328726d7
异步action
action只能影响正在运行的函数,而无法影响当前函数调用的异步操作 。action 包装/装饰器只会对当前运行的函数作出反应,而不会对当前运行函数所调用的函数(不包含在当前函数之内)作出反应 ,
也就是说promise的then或async语句,并且在回调函数中某些状态改变了,这些回调函数也应该包装在action中。
(1)第一种方案,使用action关键字来包装promises的回调函数。
// 第一种写法
(1)第一种方案,使用action关键字来包装promises的回调函数。
// 第一种写法
class Store { @observable githubProjects = [] @observable state = "pending" // "pending" / "done" / "error" @action fetchProjects() { this.githubProjects = [] this.state = "pending" fetchGithubProjectsSomehow().then( // 内联创建的动作 action("fetchSuccess", projects => { const filteredProjects = somePreprocessing(projects) this.githubProjects = filteredProjects this.state = "done" }), // 内联创建的动作 action("fetchError", error => { this.state = "error" }) ) } }
// 第二种写法
class Store { @observable githubProjects = [] @observable state = "pending" // "pending" / "done" / "error" @action fetchProjects() { this.githubProjects = [] this.state = "pending" fetchGithubProjectsSomehow().then( projects => { const filteredProjects = somePreprocessing(projects) // 将修改放入一个异步动作中 runInAction(() => { this.githubProjects = filteredProjects this.state = "done" }) }, error => { runInAction(() => { this.state = "error" }) } ) } }
第二种方案,用async function来处理业务,那么我们可以使用runInAction这个API来解决之前的问题 。
import {observable, action, useStrict, runInAction} from 'mobx'; useStrict(true); class Store { @observable name = ''; @action load = async () => { const data = await getData(); // await之后,修改状态需要动作 runInAction(() => { this.name = data.name; }); } }
- flows
然而,更好的方式是使用 flow 的内置概念。它们使用生成器。一开始可能看起来很不适应,但它的工作原理与 async / await 是一样的。只是使用 function * 来代替 async,使用 yield 代替 await 。 使用 flow 的优点是它在语法上基本与 async / await 是相同的 (只是关键字不同),并且不需要手动用 @action 来包装异步代码,这样代码更简洁。
flow 只能作为函数使用,不能作为装饰器使用。 flow 可以很好的与 MobX 开发者工具集成,所以很容易追踪 async 函数的过程。
mobx.configure({ enforceActions: true }) class Store { @observable githubProjects = [] @observable state = "pending" fetchProjects = flow(function * () { // <- 注意*号,这是生成器函数! this.githubProjects = [] this.state = "pending" try { const projects = yield fetchGithubProjectsSomehow() // 用 yield 代替 await const filteredProjects = somePreprocessing(projects) // 异步代码块会被自动包装成动作并修改状态 this.state = "done" this.githubProjects = filteredProjects } catch (error) { this.state = "error" } }) }
相关文章
- 浅谈WEB中的高并发
- [Web 前端 ] 五大WEB主流浏览器及四大内核
- Web 通信 之 长连接、长轮询(long polling)
- 【WEB前端】web前端获取的long长整型字段精度丢失问题,解决方案?
- 移动web app开发必备 - 异步队列 Deferred
- 部署和编写简单web项目
- 函数计算 HTTP 触发器支持异步,解放双手搭建 Web 服务
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
- [Web component] Using Custom Events as a web component API
- CRM Web Client UI异步搜索介绍
- CRM Web Client UI异步搜索介绍
- Atitit web 之道 艾龙著 Atitit web 之道 艾龙艾提拉著v2 saa.docx Atitit web开发之道 attilax著 Web应用 1. 第1章 Web编程基础知识 (
- Atitit.跨语言标准化 web cgi api v2 saa CGI (通用网关接口) 编辑 CGI 是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能。CG
- Atitit.web三大编程模型 Web Page Web Forms 和 MVC
- 使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
- 搭建Dynamic Web Project(动态web项目)的springmvc工程2
- Python编程:sanic异步web框架
- Python 使用 Tornado Web 框架写HTTP接口实例代码(异步+线程池)
- Atitit.web三编程模型 Web Page Web Forms 和 MVC
- Web.xml 中增加log4j
- SSL代理——见图,利用SSL代理证书替换加密Web网站的数字证书,并将SSL代理证书发送到客户端的Web浏览器,中间代理以此获得加密通信的明文内容进行和真实服务器的交互转发
- 【Web Crawler】Python 的 urllib.request 用于 HTTP 请求
- 24种提高ASP.NET Web 应用性能的方法