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

react中实现异步请求的方法一，react-thunk相关推荐

[react] react中发起网络请求应该在哪个生命周期中进行？为什么？
[react] react中发起网络请求应该在哪个生命周期中进行?为什么? 异步情况可以在componentDidMount()函数中进行. 同步的情况可以在componentWillMount()中 ...
PHP guzzle异步请求数据,Guzzle中的异步请求
Guzzle中的异步请求使用Guzzle发起异步请求 Guzzle是一个PHP的HTTP客户端,它在发起http请求时不仅可以同步发起,还可以异步发起. $client = new Client() ...
php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
SpringMVC中的异步请求-跨域访问
发送异步请求: <%@page pageEncoding="UTF-8" language="java" contentType="text/h ...
@async 没有异步_扒一扒VueCLI3.0中Axios异步请求同步化
前台经常会遇到请求同步和异步的问题,今天咱们来聊一聊vue中同步请求和异步请求那些事儿. 说到接口的请求同步和异步问题,最早接触Ajax中就存在,Ajax传递的参数有一个async,默认情况下是fal ...
html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...
使用版本 layui-v2.3.0 修改: 打开layui中table.js源码在 Class.prototype.pullData 这个方法定义内部 //获得数据 Class.prototype. ...
React基础-React中发送Ajax请求以及Mock数据
前言在 React 中, render 函数返回的结果,取决于组件的 props 和 state 我们都知道 UI 页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面 ...
React学习(九)-React中发送Ajax请求以及Mock数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
CAT中实现异步请求的调用链查看
CAT简介 CAT(Central Application Tracking),是美团点评基于 Java 开发的一套开源的分布式实时监控系统.美团点评基础架构部希望在基础存储.高性能通信.大规模在线访 ...

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

react中实现异步请求的方法一，react-thunk相关推荐

最新文章

热门文章