React学习笔记_ReactRedux应用使用AsyncAwait
来源:互联网 发布:helloworld的java程序 编辑:程序博客网 时间:2024/06/05 10:38
Async/Await
Async/Await是尚未正式公布的ES7标准新特性。简而言之,就是让你以同步方法的思维编写异步代码。对于前端,异步任务代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await 。虽然这个特性尚未正式发布,但是利用babel polyfill我们已经可以在应用中使用它了。
简单的React/Redux例子。
传统方法是利用 Promise 结合 Redux-thunk 中间件实现:
import axios from 'axios'export default function createPost (params) { const success = (result) => { dispatch({ type: 'CREATE_POST_SUCCESS', payload: result }) return result } const fail = (err) => { dispatch({ type: 'CREATE_POST_FAIL', err }) return err } return dispatch => { return axios.post('http://xxxxx', params) .then(success) .catch(fail) }}
async/await 的实现:
import axios from 'axios'export default function createPost (params) { const success = (result) => { dispatch({ type: 'CREATE_POST_SUCCESS', payload: result }) return result } const fail = (err) => { dispatch({ type: 'CREATE_POST_FAIL', err }) return err } return async dispatch => { try { const result = await axios.post('http://xxxxx', params) return success(result) } catch (err) { return fail(err) } }}
async和await是成对使用的,特点是使代码看起来和同步代码类似。
Components 组件
import React, { Component } from 'react' import { connect } from 'react-redux' import { createPost } from '../actions/post'class PostEditForm extends Component { constructor(props) { super(props) } contributePost = e => { e.preventDefault() // .... get form values as params this.props.createPost(params) .then(response => { // show success message }) .catch(err => { // show error tips }) } render () { return ( <form onSubmit={this.contributePost}> <input name="title"/> <textarea name="content"/> <button>Create</button> </form> ) }}export default connect(null, dispatch => { return { createPost: params => dispatch(createPost(params)) }})(PostEditForm)
使用 Async/Await
import React, { Component } from 'react' import { connect } from 'react-redux' import { createPost } from '../actions/post'class PostEditForm extends Component { constructor(props) { super(props) } async contributePost = e => { e.preventDefault() // .... get form values as params try { const result = await this.props.createPost(params) // show success message } catch (err) { // show error tips } } render () { return ( <form onSubmit={this.contributePost}> <input name="title"/> <textarea name="content"/> <button>Create</button> </form> ) }}export default connect(null, dispatch => { return { createPost: params => dispatch(createPost(params)) }})(PostEditForm)
可以见得,两种模式, Async\Await 的更加直观和简洁,是未来的趋势。但是目前,还需要利用babel的 transform-async-to-module-method 插件来转换其成为浏览器支持的语法,虽然没有性能的提升,但对于代码编写体验要更好。
阅读全文
0 0
- React学习笔记_ReactRedux应用使用AsyncAwait
- React学习笔记----如何在html页面中使用react
- react native 学习笔记----使用Flexbox布局
- React学习笔记_常用工具 插件使用
- 前端学习笔记-10月-React 以及其他应用
- React Native 学习笔记十二(嵌入原生应用 甚是坑啊)
- React学习学习笔记
- react native 学习笔记----将react native嵌入到Android原生应用
- 学习使用React一步步搭建普通博客应用
- REACT学习笔记
- React.js学习笔记
- react学习笔记
- react 学习笔记1
- React学习笔记
- React-Native 学习笔记
- React学习笔记
- React学习笔记
- REACT学习笔记
- 网站导出20171201
- 读书04《番茄工作法图解下》
- 一些好的网站记录(PART 8)
- 搭建IPv6网络环境
- 机器学习-第四周作业——构建深度神经网络
- React学习笔记_ReactRedux应用使用AsyncAwait
- dubbo 常见错误
- CentOS 7下添加swap文件
- 关于C语言字母译码
- hdoj 6235 Permutation
- 安装python
- 官方解读双十一大促直播都看什么指标?
- 细谈那年初做自媒体经验分享
- vi基本操作命令