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 相关文章推荐
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
200行自定义python异步非阻塞Web框架
2017/03/15 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
django如何实现视图重定向
2019/07/24 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
会计系毕业生求职信
2014/05/28 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
Python标准库pathlib操作目录和文件
2021/11/20 Python
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js