采用react fetch如何请求数据
发布时间：2023-07-07 12:00:35 所属栏目：教程 来源：未知
导读： 这篇文章主要介绍“react fetch如何请求数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react fetch如何请求数据&rdq
|
这篇文章主要介绍“react fetch如何请求数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react fetch如何请求数据”文章能帮助大家解决问题。 react fetch请求数据的方法：1、将请求的方法放在生命周期的“componentDidMount”里；2、封装fetch请求；3、通过“function checkStatus(response){...}”方法检查请求状态；4、使用封装好的请求并在服务端或浏览器打印结果即可。 React Fetch请求 1.fetch 2.React使用fetch 请求的方法一般放在生命周期的componentDidMount里 请求的数据基本格式 react fetch如何请求数据 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 请求后显示： react fetch如何请求数据 3.封装fetch请求 helper.js //全局路径 const commonUrl = 'http://127.0.0.1:3456' //解析json 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 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 服务端打印 react fetch如何请求数据 浏览器打印 react fetch如何请求数据 附赠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 } /** * 登录请求 * * @param data 数据 */ 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})) } /** * 普通请求 * @param {*url,*method,*data} options */ 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})) } （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
