Comment demander des données avec React Fetch

Comment demander des données avec React Fetch : 1. Placez la méthode demandée dans le "componentDidMount" du cycle de vie ; 2. Encapsulez la requête de récupération ; 3. Vérifiez l'état de la demande via la "fonction checkStatus(response){.. .}" méthode ;4. Utilisez la requête encapsulée et imprimez le résultat sur le serveur ou le navigateur.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React16, ordinateur Dell G3.

Comment demander des données avec React Fetch ?

React Fetch request

J'ai besoin de l'utiliser récemment, alors apprenez-le

1.fetch

demande ajax basée sur une promesse

https://developer.mozilla.org/zh-CN/docs/ Web/API /Fetch_API

2. React utilise la méthode de requête fetch

et la place généralement dans le composantDidMount du cycle de vie

Le format de base des données demandées

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

Affiché après la requête :

3. Encapsulez la demande de récupération

Encapsulé pour un appel facile

Adresse du code : 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 = &#39;cors&#39;//跨域
  delete options.url
  if(data){
    delete options.data
    options.body = JSON.stringify({
      data
    })
  }
  options.headers={
    &#39;Content-Type&#39;:&#39;application/json&#39;
  }
  return fetch(commonUrl+url,options,{credentials: &#39;include&#39;})
    .then(checkStatus)
    .then(parseJSON)
    .catch(err=>({err}))
}

Utilisez la requête encapsulée

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

service Impression du terminal

Impression du navigateur

Livré avec une classe d'assistance

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 = &#39;post&#39;
  options.made = &#39;cors&#39;
  options.body = JSON.stringify(data)
  options.headers={
    &#39;Content-Type&#39;:&#39;application/json&#39;
  }
  return fetch(&#39;/loginOk&#39;,{ ...options, credentials:&#39;include&#39;})
    .then(checkStatus)
    .then(parseJSON)
    .then((res)=>{
      if(res.retCode === &#39;0001&#39;){
        localStorage.setItem(&#39;x-access-token&#39;,res.retBody.AccessToken)
        return &#39;success&#39;
      }
      else if(res.retCode === &#39;0002&#39;){
        return &#39;error&#39;
      }
      else if(res.retCode === &#39;0003&#39;){
        return &#39;error&#39;
      }else{
        return ;
      }
      
    })
    .catch(err=>({err}))
}
/**
 * 普通请求
 * @param {*url,*method,*data} options 
 */
export  function request(options = {}){
  const Authorization = localStorage.getItem(&#39;x-access-token&#39;)
  const {data,url} = options
  options = {...options}
  options.mode = &#39;cors&#39;
  delete options.url
  if(data){
    delete options.data
    options.body = JSON.stringify(data)
  }
  options.headers={
    &#39;x-access-token&#39;:Authorization,
    &#39;Content-Type&#39;:&#39;application/json;charset=UTF-8&#39;
  }
  return fetch(url,{ ...options, credentials: &#39;include&#39;})
    .then(checkStatus)
    .then(parseJSON)
    .catch(err=>({err}))
}

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!