欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-11 09:55:08
async/await是尚未正式公布的es7标准新特性。简而言之,就是让你以同步方法的思维编写异步代码。对于前端,异步任务代码的编写经历了 callback 到现在流行的...

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)

可以见得,两种模式, async\await 的更加直观和简洁,是未来的趋势。但是目前,还需要利用babel的 transform-async-to-module-method 插件来转换其成为浏览器支持的语法,虽然没有性能的提升,但对于代码编写体验要更好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。