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 相关文章推荐
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
layui导航栏实现代码
May 19 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
详谈js的变量提升以及使用方法
Oct 06 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php实现的CSS更新类实例
2014/09/22 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
基于对象合并功能的实现示例
2017/10/10 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python shutil模块用法实例分析
2019/10/02 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
linux面试相关问题
2013/04/28 面试题
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
校本教研工作制度
2014/01/22 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书