react中实现异步请求的方法一,react-thunk

写在前面:

在react中,dispatch是同步执行reducers生成新状态的,对于页面的操作没有问题;但是如果点击事件是请求了某个结果,需要等待结果响应后再更新视图呢?应该如何处理?这里就用到了异步请求。react-thunk是解决这一问题的一个方法之一。

1、先看设置跨域的代码,文件名必须为setupProxy.js

const proxy = require("http-proxy-middleware");
module.exports = (app)=>{
    app.use("/api",proxy({
        //需要跨域的目标域名
        target:"http://m.maoyan.com",
        //是否开启代理
        changeOrigin:true,
        //路径重写
        pathRewrite:{
            "^/api":""
        }
    }))
}

2、在store中设置中间件

//applyMiddleware使用中间件
import {createStore,applyMiddleware} from "redux";
//引入redux-thunk
import thunk from "redux-thunk";
import reducer from "./reducer";

//使用react-thunk
const store = createStore(reducer,applyMiddleware(thunk));

export default store;

3、在actionCreator中进行请求

//引入fetch,为了和浏览器中自带的fetch区分重命名fetchpro
import {fetch as fetchpro} from "whatwg-fetch";

//现在的action是一个函数
export const MovieAction = ()=>{

    let action = (val)=>({
        type:"GET_MOVIE",
        value:val
    })

    return (dispatch,getState)=>{
        fetchpro("/api/ajax/movieOnInfoList?token=")
        .then(res=>res.json())
        .then((data)=>{
           dispatch(action(data));
        })
    }
}

4、在组件中执行请求数据的函数

import React, { Component } from ‘react‘;
import store from "./store";
import {MovieAction} from "./action/actionCreator";
class App extends Component {
  render() {
    return (
      <div className="App">

      </div>
    );
  }
  handleGetMovie(){
    store.dispatch(MovieAction())
  }
//在挂载后这个生命周期函数中调用
  componentDidMount(){
    this.handleGetMovie();
  }
}

export default App;

原文地址:https://www.cnblogs.com/PrayLs/p/10503615.html

时间: 2024-10-08 13:41:16

react中实现异步请求的方法一,react-thunk的相关文章

React 中的 AJAX 请求:获取数据的方法

React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 state 中. 首先引入 axios. 1.`import axios from 'axios';` constructor 方法非常标准,调用 super,然后初始化 state,设置一个空的 posts 数 传入新的 posts 数组,使用 this.setState 方法更新组件状态.这会导致重

React中的fetch请求相关

fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch.得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能:除此之外,Fetch 还利用到了请求的异步特性--它是基于 Promise 的.

Jquery中Ajax异步请求中的async参数的作用

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp;     $.ajax({         async: false,         type : "GET",         url :

Springmvc中 同步/异步请求参数的传递以及数据的返回

注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方式,以及将处理后的model 传向前台***** 1.前台传递数据的接受:传的属性名和javabean的属性相同 (1).使用基本类型,或引用类型进行接受: @RequestMapping(value="/select") PublicString  select(String name,int age,Model model){ // 这样这里的name,age 就是我们前台传递的参数,也是我们Ja

Servlet3.0中的异步请求

package com.itheima.async; import java.io.IOException; import javax.servlet.AsyncContext; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; i

Redux中发送异步请求获取数据

一.在componentDidMount中进行异步数据的获取 二.通过initListAction创建action 三.然后再通过store.dispatch派发给store 四.store再自动转发给reducer 五.reducer通过深拷贝处理数据后,再将newState返回给store 原文地址:https://www.cnblogs.com/nayek/p/12388881.html

javascript中document.getElementsByClassName兼容性封装方法一

var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getElementsByClassName if(document.getElementsByClassName) { // 浏览器支持这个方法 results.push.apply( results, document.getElementsByClassName(className) ); } else {

尝试封装一个异步请求then方法和catch方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

在Silverlight中的DispatcherTimer的Tick中使用基于事件的异步请求

需求:在silverlight用户界面上使用计时器定时刷新数据. 在 Silverlight 中的 DispatcherTimer 的 Tick 事件 中使用异步请求数据时,会出现多次请求的问题,以下是ViewModel的代码,看样子没什么问题: using System; using System.Net; using System.Threading; using System.Windows; using System.Windows.Controls; using System.Wind