Async/Await是尚未正式公布的ES7標(biāo)準(zhǔn)新特性。簡(jiǎn)而言之，就是讓你以同步方法的思維編寫(xiě)異步代碼。對(duì)于前端，異步任務(wù)代碼的編寫(xiě)經(jīng)歷了 callback 到現(xiàn)在流行的 Promise ，最終會(huì)進(jìn)化為 Async/Await 。雖然這個(gè)特性尚未正式發(fā)布，但是利用babel polyfill我們已經(jīng)可以在應(yīng)用中使用它了。
現(xiàn)在假設(shè)一個(gè)簡(jiǎn)單的React/Redux應(yīng)用，我將引入 Async/Await 到其代碼。
Actions
此例子中有一個(gè)創(chuàng)建新文章的 Action ，傳統(tǒng)方法是利用 Promise 結(jié)合 Redux-thunk 中間件實(shí)現(xiàn)。
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) }}現(xiàn)在將它改寫(xiě)為 async/await 的實(shí)現(xiàn)：
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是成對(duì)使用的，特點(diǎn)是使代碼看起來(lái)和同步代碼類(lèi)似。
Components
同樣，在React組件中，也比較一下 Promise 和 Async/Await 的方法異同。
傳統(tǒng)地使用 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)可以見(jiàn)得，兩種模式， Async/Await 的更加直觀和簡(jiǎn)潔，是未來(lái)的趨勢(shì)。但是目前，還需要利用babel的 transform-async-to-module-method 插件來(lái)轉(zhuǎn)換其成為瀏覽器支持的語(yǔ)法，雖然沒(méi)有性能的提升，但對(duì)于代碼編寫(xiě)體驗(yàn)要更好。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
