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

Z时代
2024-01-10
分类：综合

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)