Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use Async and Await in React applications". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use Async and Await in React applications" can help you solve the problem.

Async/Await is a new feature of the ES7 standard that has not yet been officially announced. In short, it allows you to write asynchronous code in a synchronous way. For the front end, the writing of asynchronous task code has gone from callback to the popular Promise, and will eventually evolve into Async/Await. Although this feature has not been officially released, we can already use it in applications with babel polyfill.

Now suppose a simple React/Redux application, and I'll introduce Async/Await into its code.

Actions

In this example, there is an Action to create a new article, which is traditionally implemented using Promise combined with Redux-thunk middleware.

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)}}

Now rewrite it as the implementation of 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 and await are used in pairs and are characterized by making the code look like synchronous code.

Components

Similarly, in the React component, compare the methods of Promise and Async/Await.

Traditionally use 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 (Create)}} export default connect (null, dispatch = > {return {createPost: params = > dispatch (createPost (params))}) (PostEditForm)

If you use 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 (Create)}} export default connect (null, dispatch = > {return {createPost: params = > dispatch (createPost (params))}}) (PostEditForm)

It can be seen that the two modes, Async\ Await is more intuitive and concise, is the trend of the future. But for now, you still need to use babel's transform-async-to-module-method plug-in to convert it into a syntax supported by browsers, although there is no performance improvement, but the coding experience is better.

This is the end of the introduction to "how React applications use Async and Await". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.