React/Redux应用使用Async/Await的方法
程序员文章站
2022-04-11 09:55:08
async/await是尚未正式公布的es7标准新特性。简而言之,就是让你以同步方法的思维编写异步代码。对于前端,异步任务代码的编写经历了 callback 到现在流行的...
async/await是尚未正式公布的es7标准新特性。简而言之,就是让你以同步方法的思维编写异步代码。对于前端,异步任务代码的编写经历了 callback 到现在流行的 promise ,最终会进化为 async/await 。虽然这个特性尚未正式发布,但是利用babel polyfill我们已经可以在应用中使用它了。
现在假设一个简单的react/redux应用,我将引入 async/await 到其代码。
actions
此例子中有一个创建新文章的 action ,传统方法是利用 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
同样,在react组件中,也比较一下 promise 和 async/await 的方法异同。
传统地使用 promise :
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 插件来转换其成为浏览器支持的语法,虽然没有性能的提升,但对于代码编写体验要更好。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Unity平台模拟自动挡驾驶汽车
下一篇: 李隆基为什么会重用李林甫?原因是什么