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


Posted in Javascript onNovember 16, 2017

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

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

Javascript 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
Node调用Java的示例代码
Sep 20 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
详解React 在服务端渲染的实现
Nov 16 #Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 #Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 #Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 #Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 #Javascript
You might like
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
vue 开发企业微信整合案例分析
2019/12/02 Javascript
js验证账户名是否重复
2020/05/26 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
使用Python读取大文件的方法
2018/02/11 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
python3注册全局热键的实现
2020/03/22 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
本科毕业生求职信
2014/06/15 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
简易离婚协议书范本
2014/10/24 职场文书
红色电影观后感
2015/06/18 职场文书
话题作文之呼唤
2019/12/18 职场文书
Python+Appium新手教程
2021/04/17 Python
Vue和Flask通信的实现
2021/05/19 Vue.js