文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

react fetch怎么请求数据

2023-05-14 21:38

关注

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯