React應用怎么使用Async和Await

這篇文章主要介紹“React應用怎么使用Async和Await”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“React應用怎么使用Async和Await”文章能幫助大家解決問題。

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 插件來轉換其成為瀏覽器支持的語法，雖然沒有性能的提升，但對于代碼編寫體驗要更好。

關于“React應用怎么使用Async和Await”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。