千家信息网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 开发技术 >

React应用怎么使用Async和Await

发表于：2025-01-19 作者：千家信息网编辑
千家信息网最后更新 2025年01月19日，这篇文章主要介绍"React应用怎么使用Async和Await"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"React应用怎么使用Async和Await"文章
千家信息网最后更新 2025年01月19日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 (