这篇文章主要介绍“react fetch如何请求数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react fetch如何请求数据”文章能帮助大家解决问题。
react fetch请求数据的方法：1、将请求的方法放在生命周期的“componentDidMount”里；2、封装fetch请求；3、通过“function checkStatus(response){...}”方法检查请求状态；4、使用封装好的请求并在服务端或浏览器打印结果即可。
React Fetch请求
fetch
React使用fetch
请求的方法一般放在生命周期的componentDidMount里
请求的数据基本格式
import React from 'react'class RequestStu extends React.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) let com = this.state.test.retBody.map((item,index)=>{ console.log(item.id) return <li key={index}>{item.name}</li> }) this.setState({ arr : com },function(){ console.log(this.state.arr) }) }) }) } render(){ return ( <div> <ul> { this.state.arr } </ul> </div> ) }}export default RequestStu
请求后显示：
封装fetch请求
helper.js
//全局路径const commonUrl = 'http://127.0.0.1:3456'//解析jsonfunction parseJSON(response){ return response.json()}//检查请求状态function checkStatus(response){ if(response.status >= 200 && response.status < 500){ return response } const error = new Error(response.statusText) error.response = response throw error}export default function request(options = {}){ const {data,url} = options options = {...options} options.mode = 'cors'//跨域 delete options.url if(data){ delete options.data options.body = JSON.stringify({ data }) } options.headers={ 'Content-Type':'application/json' } return fetch(commonUrl+url,options,{credentials: 'include'}) .then(checkStatus) .then(parseJSON) .catch(err=>({err}))}
使用封装好的请求
import React from 'react'import request from './helper.js'class RequestDemo extends React.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 ( <div> test </div> ) }}export default RequestDemo
服务端打印
浏览器打印
附赠helper类
function parseJSON(response){ return response.json()}function checkStatus(response){ if(response.status >= 200 && response.status < 500){ return response } const error = new Error(response.statusText) error.response = response throw error}export function loginReq(data){ const options = {} options.method = 'post' options.made = 'cors' options.body = JSON.stringify(data) options.headers={ 'Content-Type':'application/json' } return fetch('/loginOk',{ ...options, credentials:'include'}) .then(checkStatus) .then(parseJSON) .then((res)=>{ if(res.retCode === '0001'){ localStorage.setItem('x-access-token',res.retBody.AccessToken) return 'success' } else if(res.retCode === '0002'){ return 'error' } else if(res.retCode === '0003'){ return 'error' }else{ return ; } }) .catch(err=>({err}))}export function request(options = {}){ const Authorization = localStorage.getItem('x-access-token') const {data,url} = options options = {...options} options.mode = 'cors' delete options.url if(data){ delete options.data options.body = JSON.stringify(data) } options.headers={ 'x-access-token':Authorization, 'Content-Type':'application/json;charset=UTF-8' } return fetch(url,{ ...options, credentials: 'include'}) .then(checkStatus) .then(parseJSON) .catch(err=>({err}))}
关于“react fetch如何请求数据”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
