iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react怎么请求数据异步
  • 496
分享到

react怎么请求数据异步

React 2023-05-14 21:05:05 496人浏览 独家记忆
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react怎么请求数据异步?react异步请求数据方法。关于react异步请求数据有很多种方案。1、saga (用了er6生成器函数)2、promise3

react怎么请求数据异步

教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。

react怎么请求数据异步?

react异步请求数据方法。

关于react异步请求数据有很多种方案。

1、saga (用了er6生成器函数)

2、promise

3、thunk

4、…

为什么要用插件啊?是为了改造这个redux的action动作。如果异步的话,我们发动作,actionCreator只有返回对象,而异步这个插件能让你隔一段时间再发这个动作,是为了改造动作用的。

本文用thunk,它可能不是最好的,但是是我用得比较习惯的。

一、下载

npm i redux-thunk --save
npm i axiOS --save

二、引用。在store.js里面引入插件,并使用。

import {createStore,applyMiddleware} from 'redux'   //引入applyMiddleware
import reducers from './reducers'  //总的reducer
import thunk from 'redux-thunk'   //引入thunk 
var store = createStore(reducer,applyMiddleware(thunk));  //使用中间件
export default store;

三、发数据

在你需要模块的actionCreator里:

import axios from 'axios'
export default {
    getData(){
        return (dispatch)=>{   // 引入中间件redux-thunk后,就可以延迟发出动作
                axios.get('Http://www.xmyxapp.com/api/tab/1?start=0').then((res)=>{
                    console.log(res)
                    dispatch({
                        type:'GETDATA',
                        list:res.data.data.items.list
                    })
                })
        }
    }
}

四、效果测试

在你需要的模块里面的reducer:

var initState  ={
    list:[]
}
export const listReducer = (state = initState, action) => {
    var newState ={...state};
    switch (action.type) {
        case 'GETDATA':
            newState.list = action.list  // 这个action.list就是该模块actionCreator里传过来的值
            return newState;
        default:
            return state
    }
}

在store里面总和的reducers:

import {combineReducers} from 'redux'
import {listReducer} from '../components/list/reducer'
 var reducer = combineReducers({
     list:listReducer
 })
 export default reducer;

在你需要的模块里面的组件:

import React, { Component } from 'react'
import {connect} from 'react-redux'
import actionCreator from './actionCreator';
 class List extends Component {
  componentDidMount(){
      this.props.getData();   // 调用异步方法获取数据
  }
  render() {
      console.log(this.props);
    return (
      <div>
        <ul>
            {
                this.props.list.list.map((item)=>{
                    return item.title?<li key={item.id}>{item.title}</li>:""
                })
            }
        </ul>
      </div>
    )
  }
}
export default connect((state)=>state,actionCreator)(List);

以上就是react怎么请求数据异步的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react怎么请求数据异步

本文链接: https://www.lsjlt.com/news/206214.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react怎么请求数据异步
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么请求数据异步?react异步请求数据方法。关于react异步请求数据有很多种方案。1、saga (用了er6生成器函数)2、promise3...
    99+
    2023-05-14
    React
  • react异步请求数据怎么实现
    在React中实现异步请求数据有多种方式,以下是其中几种常用的方法:1. 使用`fetch` API:`fetch`是现代浏览器提供...
    99+
    2023-09-13
    react
  • react如何请求数据异步
    这篇文章主要讲解了“react如何请求数据异步”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react如何请求数据异步”吧!react请求数据异步的方法:1、通过“npm i redux-t...
    99+
    2023-07-04
  • react异步请求数据的方法是什么
    在React中,常用的异步请求数据的方法有以下几种:1. 使用fetch API:fetch是现代浏览器提供的一种用于进行网络请求的...
    99+
    2023-08-19
    react
  • react怎么请求数据
    这篇文章主要介绍“react怎么请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react怎么请求数据”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • react fetch怎么请求数据
    本教程操作环境:Windows10系统、react16版、Dell G3电脑。react fetch怎么请求数据?React Fetch请求最近需要用,所以学习一下1.fetch基于promise的ajax请求https://develop...
    99+
    2023-05-14
    fetch React
  • React 中怎么请求远程数据
    本篇文章给大家分享的是有关React 中怎么请求远程数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。方式1:内联这是最简单,最直接的选择。在...
    99+
    2024-04-02
  • 小程序异步请求怎么改为同步请求
    小程序的网络请求默认是异步请求,无法直接改为同步请求。但是可以使用ES6的async/await来实现类似同步的效果。1. 在异步请...
    99+
    2023-10-20
    小程序
  • react后端请求数据怎么实现
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react后端请求数据怎么实现?react-ajax请求后台数据方法react-ajaxaxios方法一:在package.json中配置 "p...
    99+
    2023-05-14
    React
  • golang 异步请求
    随着互联网的快速发展,越来越多的应用需要与外部服务交互,而这些服务所提供的 API 往往都是异步的。在单线程的程序中,同步请求往往会造成程序的堵塞,影响程序的性能和响应速度。因此,在异步请求方面,golang 这门语言的独特设计可以让我们更...
    99+
    2023-05-18
  • 【Java】数据交换 Json 和 异步请求 Ajax
     🎄欢迎来到@边境矢梦°的csdn博文,本文主要讲解Java 中 数据交换和异步请求 Json&Ajax 的相关知识🎄 🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生...
    99+
    2023-08-31
    json ajax 前端
  • Ajax异步请求JSon数据实例介绍
    这篇文章主要介绍“Ajax异步请求JSon数据实例介绍”,在日常操作中,相信很多人在Ajax异步请求JSon数据实例介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ajax...
    99+
    2024-04-02
  • react fetch如何请求数据
    这篇文章主要介绍“react fetch如何请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react fetch如何请求数据”文章能帮助大家解决问题。react fetch请求数据的方法:1...
    99+
    2023-07-04
  • 异步请求PHP服务器,不返回数据怎么办
    本篇内容主要讲解“异步请求PHP服务器,不返回数据怎么办”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“异步请求PHP服务器,不返回数据怎么办”吧!       &n...
    99+
    2023-06-28
  • java中怎么异步请求网络
    本篇文章给大家分享的是有关java中怎么异步请求网络,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。java怎么实现异步请求网络,这里实现思路有很多种,但是我们这里有个比较方便的...
    99+
    2023-06-02
  • vue异步请求数据重新渲染方式
    目录vue异步请求数据重新渲染下面介绍一种方法解决自定义组件异步获取数据重新渲染视图层逻辑层vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 ...
    99+
    2024-04-02
  • 原生JS如何发送异步数据请求
    这篇文章主要介绍原生JS如何发送异步数据请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到原生J...
    99+
    2024-04-02
  • 如何异步请求处理函数
    本篇文章为大家展示了如何异步请求处理函数,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。sendmail.php代码如下:<php$name = $_POST[...
    99+
    2024-04-02
  • RocketMQ怎么实现请求异步处理
    这篇文章主要介绍“RocketMQ怎么实现请求异步处理”,在日常操作中,相信很多人在RocketMQ怎么实现请求异步处理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”RocketMQ怎么实现请求异步处理”的疑...
    99+
    2023-06-19
  • vue中同步和异步请求怎么设置
    本篇内容介绍了“vue中同步和异步请求怎么设置”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、什么是同步请求在前端开发中,我们通常使用异步...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作