云技术文章页正文上
这篇文章主要介绍“react fetch如何请求数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react fetch如何请求数据”文章能帮助大家解决问题。 react fetch请求数据的方法：1、将请求的方法放在生命周期的“componentDidMount”里；2、封装fetch请求；3、通过“function checkStatus(response){…}”方法检查请求状态；4、使用封装好的请求并在服务端或浏览器打印结果即可。React Fetch请求1.fetch2.React使用fetch请求的方法一般放在生命周期的componentDidMount里请求的数据基本格式
importReactfrom'react'
classRequestStuextendsReact.Component{
constructor(props){
super(props)
this.state={
test:{},
arr:[]
}
}
componentDidMount(){
fetch('http://localhost/console/scene/scenedetaillist',{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
mode:'cors',
cache:'default'
})
.then(res=>res.json())
.then((data)=>{
console.log(data)
this.setState({
test:data
},function(){
console.log(this.state.test)
letcom=this.state.test.retBody.map((item,index)=>{
console.log(item.id)
return
})
this.setState({
arr:com
},function(){
console.log(this.state.arr)
})
})
})
}
render(){
return(
-
{
this.state.arr
}
)
}
}
exportdefaultRequestStu请求后显示：3.封装fetch请求helper.js
//全局路径
constcommonUrl='http://127.0.0.1:3456'
//解析json
functionparseJSON(response){
returnresponse.json()
}
//检查请求状态
functioncheckStatus(response){
if(response.status>=200&&response.status({err}))
}
使用封装好的请求
importReactfrom'react'
importrequestfrom'./helper.js'
classRequestDemoextendsReact.Component{
componentDidMount(){
request({
url:'/posttest',
method:'post',
data:{"Header":{"AccessToken":"eyJ0eXBlIjoiSldUIiwiYWxnIjoiSFM1MTIifQ.eyJzdWIiOiIxMDYiLCJleHBpciI6MTUxMDczODAzNjA5MiwiaXNzIjoiIn0.eo000vRNb_zQOibg_ndhlWbi27hPt3KaDwVk7lQiS5NJ4GS4esaaXxfoCbRc7-hjlyQ8tY_NZ24BTVLwUEoXlA"},"Body":{}}
}).then(function(res){
console.log(res)
})
}
render(){
return(
test
)
}
}免费云主机、域名
exportdefaultRequestDemo
服务端打印浏览器打印附赠helper类
functionparseJSON(response){
returnresponse.json()
}
functioncheckStatus(response){
if(response.status>=200&&response.status{
if(res.retCode==='0001'){
localStorage.setItem('x-access-token',res.retBody.AccessToken)
return'success'
}
elseif(res.retCode==='0002'){
return'error'
}
elseif(res.retCode==='0003'){
return'error'
}else{
return;
}
})
.catch(err=>({err}))
}
/**
*普通请求
*@param{*url,*method,*data}options
*/
exportfunctionrequest(options={}){
constAuthorization=localStorage.getItem('x-access-token')
const{data,url}=options
options={...options}
options.mode='cors'
deleteoptions.url
if(data){
deleteoptions.data
options.body=JSON.stringify(data)
}
options.headers={
'x-access-token':Authorization,
'Content-Type':'application/json;charset=UTF-8'
}
returnfetch(url,{...options,credentials:'include'})
.then(checkStatus)
.then(parseJSON)
.catch(err=>({err}))
}
关于“react fetch如何请求数据”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云技术行业资讯频道，小编每天都会为大家更新不同的知识点。
本篇内容介绍了“react的合成事件是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！React合成事件是React模拟原生DOM事件所有能力的一个事件对象，…
文章页内容下
主机管理平台有哪些？
企业网站主机，选云服务器还是虚拟主机？
域名注册申请，必须要实名吗？