iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react fetch怎么请求数据
  • 415
分享到

react fetch怎么请求数据

fetchReact 2023-05-14 21:05:44 415人浏览 薄情痞子
摘要

本教程操作环境:windows10系统、React16版、Dell G3电脑。react fetch怎么请求数据?React Fetch请求最近需要用,所以学习一下1.fetch基于promise的ajax请求https://develop

react fetch怎么请求数据

教程操作环境:windows10系统、React16版、Dell G3电脑。

react fetch怎么请求数据?

React Fetch请求

最近需要用,所以学习一下

1.fetch

基于promise的ajax请求

https://developer.mozilla.org/zh-CN/docs/WEB/api/Fetch_API

2.React使用fetch

请求的方法一般放在生命周期的componentDidMount里

请求的数据基本格式

68cb7c010ae1f12ebf4bd62f0e2b898.jpg

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

请求后显示:

5bafb9bab4e50a2fdad524487b4c195.jpg

3.封装fetch请求

封装好方便调用

代码地址:https://GitHub.com/klren0312/react_study/blob/master/stu13/src/helper.js

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

服务端打印

f13f84fea5979570327bbbcda05ff60.jpg

浏览器打印

0431799903221e1e01576787cda61c6.jpg

附赠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怎么请求数据的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react fetch怎么请求数据

本文链接: https://www.lsjlt.com/news/206626.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react fetch怎么请求数据
    本教程操作环境:Windows10系统、react16版、Dell G3电脑。react fetch怎么请求数据?React Fetch请求最近需要用,所以学习一下1.fetch基于promise的ajax请求https://develop...
    99+
    2023-05-14
    fetch React
  • react fetch如何请求数据
    这篇文章主要介绍“react fetch如何请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react fetch如何请求数据”文章能帮助大家解决问题。react fetch请求数据的方法:1...
    99+
    2023-07-04
  • react怎么请求数据
    这篇文章主要介绍“react怎么请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react怎么请求数据”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • react怎么请求数据异步
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么请求数据异步?react异步请求数据方法。关于react异步请求数据有很多种方案。1、saga (用了er6生成器函数)2、promise3...
    99+
    2023-05-14
    React
  • React 中怎么请求远程数据
    本篇文章给大家分享的是有关React 中怎么请求远程数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。方式1:内联这是最简单,最直接的选择。在...
    99+
    2024-04-02
  • react后端请求数据怎么实现
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react后端请求数据怎么实现?react-ajax请求后台数据方法react-ajaxaxios方法一:在package.json中配置 "p...
    99+
    2023-05-14
    React
  • react异步请求数据怎么实现
    在React中实现异步请求数据有多种方式,以下是其中几种常用的方法:1. 使用`fetch` API:`fetch`是现代浏览器提供...
    99+
    2023-09-13
    react
  • react如何请求数据异步
    这篇文章主要讲解了“react如何请求数据异步”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react如何请求数据异步”吧!react请求数据异步的方法:1、通过“npm i redux-t...
    99+
    2023-07-04
  • react中如何请求远程数据
    这篇文章给大家分享的是有关react中如何请求远程数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 请求远程数据的四种方法:1、直接在React组件...
    99+
    2024-04-02
  • 聊一聊数据请求中Ajax、Fetch及Axios的区别
    目录Ajax介绍Fetch介绍Axios介绍对比 几种方式的对比总结Ajax介绍 Ajax是XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,早期的项...
    99+
    2024-04-02
  • React Native如何采用Fetch方式发送跨域POST请求
    这篇文章主要为大家展示了“React Native如何采用Fetch方式发送跨域POST请求”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“React Nativ...
    99+
    2024-04-02
  • react后端请求数据如何实现
    本篇内容主要讲解“react后端请求数据如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react后端请求数据如何实现”吧!react后端请求数据的实现方法:1、在package.json...
    99+
    2023-07-04
  • react怎么发送axios请求
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么发送axios请求?React中使用axios发送请求的常用方法React中安装并引入axios依赖在React项目中使用axios请求,首...
    99+
    2023-05-14
    React
  • react异步请求数据的方法是什么
    在React中,常用的异步请求数据的方法有以下几种:1. 使用fetch API:fetch是现代浏览器提供的一种用于进行网络请求的...
    99+
    2023-08-19
    react
  • 怎么处理使用fetch发送post请求时的参数
    这篇文章主要为大家展示了“怎么处理使用fetch发送post请求时的参数”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么处理使用fetch发送post请求时的...
    99+
    2024-04-02
  • react请求数据并渲染的方法是什么
    在React中,可以使用fetch或axios等库来发送请求并获取数据。一般情况下,在组件的生命周期方法中发送请求并在获取到数据后进...
    99+
    2023-10-07
    react
  • react怎么请求部分刷新
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么请求部分刷新?React实现局部刷新【项目结构】流程: 入口文件 -> 路由 -> layout -> Analysi/M...
    99+
    2023-05-14
    刷新 React
  • SpringMVC怎么映射请求数据
    这篇文章主要介绍了SpringMVC怎么映射请求数据的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇SpringMVC怎么映射请求数据文章都会有所收获,下面我们一起来看看吧。1.获取参数值1.说明开发中,如何获取...
    99+
    2023-07-02
  • react axios请求拦截怎么实现
    本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。react axios请求拦截怎么实现react 封装axios请求拦截、响应拦截、封装post、get请求默认你已经创建好了一个react项目首先我们需要...
    99+
    2022-11-22
    axios React
  • React之如何在Suspense中优雅地请求数据
    目录什么是 Sunpense懒加载挂起懒加载组件的加载过程对需要请求数据的组件使用 Suspensereact-cache自己写一个加工函数请求数据的时机结论什么是 Sunpense...
    99+
    2023-05-17
    在Suspense中请求数据 React Suspense Suspense请求数据
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作