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)