async -- await 解决数据异步获取

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

巴特西

async -- await 解决数据异步获取

最新文章

热门文章