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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
天津市收音机工业发展史
2021/03/04 无线电
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python wsgiref源码解析
2021/02/06 Python
毕业大学生自荐信
2014/06/17 职场文书
节水口号标语
2014/06/19 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
财务工作个人总结
2015/02/27 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
美容院员工规章制度
2015/08/05 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang