React/Redux应用使用Async/Await的方法

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)