React/Redux應用使用Async/Await的方法
更新時間：2017年11月16日 09:58:45 作者：Touchumind
本篇文章主要介紹了React/Redux應用使用Async/Await的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Async/Await是尚未正式公布的ES7標準新特性。簡而言之，就是讓你以同步方法的思維編寫異步代碼。對于前端，異步任務代碼的編寫經歷了 callback 到現在流行的 Promise ，最終會進化為 Async/Await 。雖然這個特性尚未正式發(fā)布，但是利用babel polyfill我們已經可以在應用中使用它了。
現在假設一個簡單的React/Redux應用，我將引入 Async/Await 到其代碼。
Actions
此例子中有一個創(chuàng)建新文章的 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-Router中Url參數改變頁面不刷新的解決辦法
這篇文章主要介紹了詳解React-Router中Url參數改變頁面不刷新的解決辦法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
在?React?Native?中使用?CSS?Modules的配置方法
有些前端工程師希望也能像開發(fā) web 應用那樣，使用 CSS Modules 來開發(fā) React Native，本文將介紹如何在 React Native 中使用 CSS Modules，需要的朋友可以參考下2022-08-08
路由管理的功能主要指的頁面跳轉、goBack、帶參數跳轉等功能,這篇文章主要給大家介紹了關于React Native自定義路由管理的相關資料,需要的朋友可以參考下2021-08-08
本文主要介紹了react中路由跳轉及傳參的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了基于react項目打包css引用路徑錯誤解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了React項目經驗總結,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了react如何自定義實現狀態(tài)管理,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
React中使用Redux Toolkit狀態(tài)管理的示例詳解
在現代 React 應用程序中,狀態(tài)管理是一個至關重要的部分,使用 Redux Toolkit 可以簡化 Redux 的配置和管理,本文將通過三個文件的示例,詳細講解如何使用 Redux Toolkit 創(chuàng)建和管理一個簡單的計數器狀態(tài),需要的朋友可以參考下2024-11-11
這篇文章主要介紹了Ant?Design?組件庫按鈕實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪</P><P><BR>2022-08-08
這篇文章主要介紹了React.js組件實現拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04