首页 网络技术
  1. 正文

react怎么请求数据

react请求数据用“componentDidMount”钩子。React的数据请求是在钩子函数componentDidMount()中进行的,该函数可以用来加载外部数据,或处理其他的副作用代码。

本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。

React的数据请求是在钩子函数:componentDidMount 中进行的

componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重渲染。所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。

针对React中使用起来较为方便的几种数据请求方式进行了汇总,主要有以下三种,都是通过json-server模拟数据请求的接口。

1 axios

这种方法使用较为普遍,在vue中也是经常使用

使用前先下载一哈: npm i axios

 axios.get(' http://localhost:3000/datalist').then(res=>{
console.log(res);})

结果:

2 fetch方式

fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。【引自fetch】

fetch('http://localhost:3000/datalist').then(res=>res.json()).then(res=>{
 console.log(res)})

结果:

3 传统的ajax请求

这个大家应该都不陌生就不细说了,当然在react也是可以用它的

let xhr = new XMLHttpRequest();xhr.addEventListener('load',handler);xhr.open("GET",'http://localhost:3000/datalist');xhr.send();function handler(e){
console.log(JSON.parse(e.currentTarget.response));}

结果:

本文标题:react怎么请求数据
本文链接:https://www.qqooo.cn/post/7057.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!