react请求应该放在哪里？为什么？

已于 2023-02-28 16:39:34 修改
阅读量522 收藏
点赞数
文章标签： react.js javascript 前端
于 2023-02-28 16:39:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59070120/article/details/129264808
版权
文章讨论了在React应用中处理异步请求的位置，建议将它们放在componentDidMount生命周期方法中，因为constructor主要用于初始化state和绑定函数，不适宜执行业务逻辑，而componentWillMount已被弃用且在服务端渲染时可能执行两次。因此，componentDidMount是更合适的选择。
摘要由CSDN通过智能技术生成

对于异步请求应该放在componentDidmount里面

constructor

  可放，不推荐，主要用于初始化state的工作和函数的绑定，不承担业务逻辑，并且constructor已经很少用了

componentwillmount

如果使用服务端渲染，可能会被执行两次，第一次在服务端，第二次在客户端，componentDidmount不会；并且已经被标记弃用，不利于react升级后的代码维护

大鸡腿最好吃
关注
React 项目记录（六）——配置 API 接口文件
怪力马猴烧酒的博客
01-21 1918
Step 1：配置 tool/api.js 文件 将接口请求配置文件存放于 tool 文件夹中并命名为 api.js： var root = '/api/v1' var request = require('superagent') function dataType(data) { // 获取数据类型 return ({}).toString.call(data).match(/\s([a-...
react 把前后台的axios请求放在一起_用React+Antd封装Axios实现全局Loading效果
weixin_42515561的博客
02-11 715
前言今天在作react后台管理的时候要实现一个全局Loading效果，一般使用axios库与后端进行数据交互。为了更好的用户体验，在每次请求前添加一个加载效果，让用户知道在等待加载。css要实现这个功能，咱们能够在每一个组件请求手动添加加载效果返回后再将其隐藏，但若是每一个请求都这么作，就要作屡次重复设置显得很麻烦，但好处是能够设置定制多种请求效果。但考虑到该项目场景为后台管理系统，给管理员使用，...
如何优雅的在react-hook中进行网络请求
wayne214的博客
09-27 2891
本文将介绍如何在使用React Hook进行网络请求及注意事项。 文章目录前言使用useState创建js页面使用useEffect请求数据你会遇到的问题手动触发hook请求添加一个加载框网络请求错误的处理CommonFetchApi使用useReducer进行网络请求页面销毁时中断网络请求总结 前言 Hook是在React 16.8.0版本中新加入的特性，同时在React-Native的0.59.0版本及以上进行了支持，使用hook可以不用class的方式的方式使用state，及类似的生命周期特性。 本片
react中的数据请求
weixin_30563917的博客
12-17 1103
在react中，没有提供专门的请求数据的模块，所以我们可以采用第三方请求数据的模块进行数据请求，常见的有axios和fetch-jsonp，下面来总结这两种方式的用法。 axios 查看文档 https://github.com/axios/axios 创建项目 1，使用npx create-react-app react-router创建项目， 2，在src文件夹下新建compon...
关于React中数据获取为什么一定要在componentDidMount里面调用？
热门推荐
ky1in93的博客
08-02 1万+
总结了许多文章，结论如下： constructor() constructor()中获取数据的话，如果时间太长，或者出错，组件就渲染不出来，整个页面都没法渲染了。 constructor是作组件state初绐化工作，并不是设计来作加载数据的。 componentWillMount() 如果使用SSR（服务端渲染）,componentWillMount会执行2次，一次在服...
react——网络请求
阿牛哥的博客
09-21 710
react——网络请求
为什么React获取数据是在componentDidMount
weixin_33861800的博客
03-05 682
用于获取数据的代码可以写在componentWillMount或者componentDidMouont中。 前者会在组件首次渲染前触发，后者则是在组件挂载后立即触发。 使用前者似乎是正确的做法，毕竟我们希望尽快的加载数据，不过需要注意一点。 实际上，服务端和客户端渲染都会触发componentWillMount函数。 当在服务端渲染组件时，触发异步API会带来预料之外的结果。 因此，我们只能用co...
React基础-React中发送Ajax请求以及Mock数据
lt_xiaodou的博客
09-08 1194
前言在React中,render函数返回的结果,取决于组件的props和state我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面上 ,那么应该在哪个生命周期函数中发起请求?又如何发起Ajax请求呢以及有哪些方式?以及我们怎么样模拟一个后端数据接口?示例API返回如下json对象假如后端返回的商品列表如下所示{{"id": 1, "name": "瓜子", "price": 10, "address": "广东"},
react 请求配置
weixin_44523653的博客
11-23 1421
最近开始慢慢学习react,关于请求配置有以下几点记录，如有错误，恳请指正 package.json中配置porxy porxy:"http://localhost:3001" 这种方式只能配置一个代理 setupProxy.js 看网上有很多例子说要配置这个文件，但是这个文件是需要webpack提前预设好配置的，这里记录一下，也是配置setupProxy.js，再手动去注册一下 //http-proxy-middleware 是node的代理模块，需要 npm install http-proxy-mi
ReactNative 网络请求
jaywen1989的博客
09-25 860
网络请求接口 1、首先准备个接口，请求参数为 methodName：接口方法名 version：接口版本号 count：取多少条 2、返回的Json样式一般为 { "code": 0, "msg": "success", "version": "1.0", "data": { } } { "code": 0, "msg...
react多个网络请求_React-Native中网络请求的总结
weixin_39735288的博客
12-19 263
前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。1.get的请求方式的实现//g et请求static get(url, callback) {fetch(url). then ((response) => response.text()) . then ((responseText)...
react怎么初始化页面？
weixin_42575505的博客
02-14 270
React 是一个 JavaScript 库，用于构建用户界面。为了初始化 React 页面，您需要执行以下步骤： 在 HTML 文件中引入 React 库和 React DOM 库： <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script> <script sr...
React的网络请求发送-----React学习（二）
henu_GM的博客
03-01 3093
学前知识： 1、React本身只关注于页面，并不包含发送ajax请求的代码 2、前端应用需要通过ajax请求来与后台进行交互 3、react应用中需要集成第三方ajax库 4、常用的ajax库有jQuery和axios 在这里，我们使用axios： 安装依赖： npm install axios --save 引入axios依赖： import axios from 'axios' axios的get操作： axios.get('/user?ID=12345') .the..
React数据管理Redux和thunk异步操作
bigb的博客
09-14 771
React 中 redux的 configureStore 来创建统一的数据管理中心。
2-2-4 & 5 & 6 React Hooks基础API
m0_38066007的博客
05-08 333
- useState - useEffect - useRef - useMemo - useCallback - useContext useState hook 作用：管理状态，并当状态发生变化的时候反向通知React重绘。 通知方向： state hook -> React Component -> render import {useState} from 'react' function App(){ const [count, setCount] =
react中发送请求-学习笔记
anne_IT_blog的博客
02-12 5869
react中发送请求
React学习第七天（数据请求）
weixin_49239088的博客
08-20 650
react的数据请求我们用的比较多的数据请求的方式1、原生ajax2、基于jquery(基于js的一个插件库)的ajax3、 es6语法"jquery ajax"中请求的问题如何才能在jquery中使用this 解决办法是：在ajax外边对this进行赋值使用bind(this)来处理react数据请求例子react请求的位置react请求的例子 我们用的比较多的数据请求的方式 1、原生ajax var xhr=new xmlHttpRequest() 使用GET方法的具体代码 <script>
React-api配置
weixin_61687046的博客
11-30 1703
react-api配置
【React Native】从React开始——网络请求之axios
梦否
12-02 5070
文章目录1. 前言1.1 promise 是什么？2. axios2.1 解决跨域问题2.2 Get请求 1. 前言 偶然看到了这个axios这个框架，当然也找到了一个官方的文档说明。 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 了解一些前端开发的大多都使用过AJAX来进行网络请求，那么为什么还需要axios这个库。我们知道AJAX的引入是为了页面的局部刷新，即：AJAX = 异步 JavaScript 和 XML（Asynchronous Java
vue和react异步请求的代码区别
最新发布
06-08
Vue和React都可以使用axios进行异步请求，但是它们的使用方式不完全相同。 在Vue中，我们可以在Vue组件的`methods`中定义一个方法来处理异步请求，例如： ```javascript methods: { fetchData() { axios.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); } } ``` 而在React中，则通常会将异步请求放在`componentDidMount`生命周期函数中，例如： ```javascript class MyComponent extends React.Component { componentDidMount() { axios.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); } render() { // 渲染组件 } } ``` 需要注意的是，React中使用axios时，需要在`componentWillUnmount`生命周期函数中取消未完成的请求，以免出现内存泄漏的问题。例如： ```javascript class MyComponent extends React.Component { constructor(props) { super(props); this.source = axios.CancelToken.source(); } componentDidMount() { axios.get('/api/data', { cancelToken: this.source.token }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); } componentWillUnmount() { this.source.cancel('组件卸载，取消请求'); } render() { // 渲染组件 } } ``` 以上是Vue和React异步请求的代码区别。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鸡腿最好吃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值