在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
插件来转换其成为浏览器支持的语法,虽然没有性能的提升,但对于代码编写体验要更好。