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

最新推荐文章于 2024-04-18 14:29:49 发布

转载最新推荐文章于 2024-04-18 14:29:49 发布 · 1.1k 阅读

文章标签：

#javascript #ViewUI

本文对比了React组件中使用Promise与Async/Await处理异步操作的区别，展示了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 插件来转换其成为浏览器支持的语法，虽然没有性能的提升，但对于代码编写体验要更好。