[Web] mobx 异步操作
转载自:https://www.jianshu.com/p/66dd328726d7
异步action
(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] mobx 异步操作的更多相关文章
- C#Web异步操作封装
using System; using System.Collections.Generic; using System.Web; namespace HttpAsync { /// <summ ...
- 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作
原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, ...
- [Web 前端] mobx教程(五)-Mobx常见问题及解决方案(1)Mobx使用严格模式
copy from : https://blog.csdn.net/smk108/article/details/83185745 mobx在严格模式下,不允许在 action 外更改任何状态.但是不 ...
- [Web 前端] mobx教程(三)-在React中使用Mobx
copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...
- [Web 前端] mobx教程(二)-mobx主要概念
cp from : https://blog.csdn.net/smk108/article/details/84960159 通过<Mobx教程(一)-Mobx简介>我们简单理解了Mob ...
- [web 前端] mobx教程(一)-mobx简介
opy from : https://blog.csdn.net/smk108/article/details/84777649 Mobx是通过函数响应式编程使状态管理变得简单和可扩展的状态管理库.M ...
- [Web 前端] 如何构建React+Mobx+Superagent的完整框架
ReactJS并不像angular一样是一个完整的前端框架,严格的说它只是一个UI框架,负责UI页面的展示,如果用通用的框架MVC来说,ReactJs只负责View了,而Angular则是一个完整的前 ...
- [Web 前端] MobX
1. 介绍 1.1. 原理 React的render是 状态 转化为树状结构的渲染组件的方法 而MobX提供了一种存储,更新 状态 的方法 React 和 MobX都在优化着软件开发中相同的问题. R ...
- [Web] How to Test React and MobX with Jest
转载自: https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest?utm_content=bu ...
随机推荐
- 《JavaScript高级程序设计》笔记:高级技巧
高级函数 安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串.每个类在内部都有一个[[Cla ...
- Java 字符串(二)字符串常用操作
一.连接字符串 1.连接多个字符串 使用“+”运算符可以实现连接多个字符串的功能.“+” 运算符可以连接多个运算符并产生一个 String 对象. 2.连接其他数据类型 字符串与其他基本数据类型进行连 ...
- JavaScript 流程控制(一)顺序结构与分支结构
语句:语句可以理解为一个行为,循环语句和判断语句就是典型的语句.一个程序有很多个语句组成,一般情况下分号;分割一个一个的语句:如果省略分号,则由解析器确定语句的结尾(不推荐使用) 一.流程控制 流程控 ...
- Java垃圾回收_过程观察
这是今天看JVM垃圾回收的时候做的实验观察. 使用工具:Java VisualVM.VisualVM GC插件 观察应用:Tomcat容器中的Web服务 1. Java VisualVM 在tomca ...
- 【Python】列表推导式
1. 列表推导式 list1 = [1, 3, 5, 6, 8] list2 = [x * 2 for x in list1] print(list2) # [2, 6, 10, 12, 16]
- elasticsearch must 和 should 并列的情况
在elasticsearch中如果要对几个字段进行查询,然后其中有一个字段可以有多个取值的时候,正常想到的要用should,其实就是或的关系.但是正确的做法,应该是把should并列的条件整合到一个b ...
- 【VNCserver】Centos7.4安装VNC连接华为云或亚马逊云
1.1 文档背景 CentOS 7 / RHEL 7部署图形化界面 安装VNCserver实现linux系统云主机桌面化,通过普通用户实现桌面化操作 2. Vncserver服务端部署 2.1 安装 ...
- zabbix--4.0源码安装
Zabbix4.0 源码编译安装 ps:其实相对 zabbix 来说,直接按照官网 yum 安装还是要方便点,我这里已经有 lnmp 的环境了,就想自己编译安装试下. 官网yum安装中文文档:http ...
- AI人工智能-Python实现前后端人机聊天对话
[前言] AI 在人工智能进展的如火如荼的今天,我们如果不尝试去接触新鲜事物,马上就要被世界淘汰啦~ 本文拟使用Python开发语言实现类似于WIndows平台的“小娜”,或者是IOS下的“Siri” ...
- 1062 Error 'Duplicate entry '1438019' for key 'PRIMARY'' on query
mysql主从库同步错误:1062 Error 'Duplicate entry '1438019' for key 'PRIMARY'' on querymysql主从库在同步时会发生1062 La ...