前言:之前我们介绍了 async 和 await 函数的用法,下面我们尝试着在 react 和 redux 中运用 async 语法。
安装
在浏览器环境中,由于大多数浏览器还不支持 async await 的语法,故而我们需要安装 babel 插件编译后使用
1 2
| npm install --save-dev babel-plugin-transform-async-to-generator
|
安装完插件后配置 .babelrc
文件
1 2 3
| { "plugins": ["transform-async-to-generator"] }
|
推荐 babel-plugin-transform-async-to-generator 插件的里有在于,其不需要其他插件进行配合,经过上述配置后,单独即可使用,比较方便。
redux 中使用 async await
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| export default function doFetch(params) { return dispatch => { return fetch('http://api', params) .then(data => { dispatch({ type: 'FETCH_SUCCESS', payload: data }) }) .catch(err => { dispatch({ type: 'FETCH_FAIL', err }) }) } }
export default function doFetch(params) { return async dispatch => { try { const data = await fetch('http://api', params) return dispatch({ type: 'FETCH_SUCCESS', payload: data }) } catch (err) { dispatch({ type: 'FETCH_FAIL', err }) } } }
|
上面的例子中我们成功将 promise 回调的方式,改造成了 async 的方式,在 redux 的编写中,这将会优化我们的写法,使我们的写法看上去更像同步的方式
在 React 中使用 async await
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
| class FetchDataComponent extends Component { constructor(props) { super(props); this.fetchData = this.fetchData.bind(this); }
fetchData(e) { e.preventDefault(); fetch('http: .then(data => { }) .catch(err => { }) }
render () { return ( <div onClick={this.fetchData}> 获取数据 </div> ) } }
class FetchDataComponent extends Component { constructor(props) { super(props); this.fetchData = this.fetchData.bind(this); }
async fetchData(e) { e.preventDefault(); try { let data = await this.props.fetchData(params); } catch (err) { } }
render () { return ( <div onClick={this.fetchData}> 获取数据 </div> ) } }
|
以上是对 React 中的组件获取数据部分进行了 async 改造。这种写法虽然对性能没有提升,甚至因为还需要通过转义的步骤而损失些许性能(忽略不计),但是带来的编程遍历和语法简洁(更像同步的方式)是不言而喻的