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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
es6新特性之 class 基本用法解析
May 05 Javascript
JS module的导出和导入的实现代码
Feb 25 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
用session做客户验证时的注意事项
2006/10/09 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
浅析PHP开发规范
2018/02/05 PHP
JS 页面计时器示例代码
2013/10/28 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Three.js快速入门教程
2016/09/09 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
公司道歉信范文
2014/01/09 职场文书
毕业生实习证明
2014/09/19 职场文书
十佳少年事迹材料
2014/12/25 职场文书
清洁工岗位职责
2015/02/13 职场文书
2016教师节问候语
2015/11/10 职场文书
学校体育节班级口号
2015/12/25 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电