Comment implémenter les données de requête backend de réaction

Comment implémenter les données de requête backend de réaction : 1. Configurez ""proxy": "http://localhost:5000"" dans package.json ; 2. Créez le fichier "setupProxy.js" dans le répertoire src ; . , appelez la fonction configurée dans "setupProxy.js", le code est tel que "createProxyMiddleware('/api2',{target:...}".

L'environnement d'exploitation de ce tutoriel : système Windows10. , version React18.0.0, ordinateur Dell G3

Comment demander des données au back-end React ? nous voulons proxy vers

 "proxy":"http://localhost:5000"

Obtenez les données de /students dans localhost:5000

**Avantages : **Configuration simple, la demande de ressources frontale ne nécessite aucun préfixe

Méthode 2 : Créez le fichier setupProxy.js dans le répertoire src

Étape 1 : Webpack est configuré Appelez la fonction configurée dans setupProxy.js

• Étape 2 : Configurer

•   getStudentData = () => {
      axios.get('/students').then(
        (result) => { console.log(result.data); },
        (reason) => { console.log(reason); })
    }

Lien pour résoudre le problème : https://www.csdn.net/tags/OtTaIg0sNzE3OC1ibG9n.html

Demande inter-domaine, cas d'interface réel

App.jsx

• //const proxy=require("http-proxy-middleware")   :视频中请求的包，引用它出现了无法访问的问题//应该使用以下写法*******const { createProxyMiddleware } = require("http-proxy-middleware");module.exports=function(app){
      app.use(
          createProxyMiddleware('/api1',{//遇见/api1前缀的请求，就会触发该代理配置
              target:"http://localhost:5000",//请求转发给谁
              changeOrigin:true,//控制服务器收到的请求头中Host字段的值：host就是主机名+端口号
              	//true:后端接收到的host：localhost:5000
              	//false:后端接收到的host：localhost:3000
              	//系统默认为false，一般会设为true
              pathRewrite:{"^/api1":""}//重写请求路径（必须要写）
              //不写：后台接收到的请求路径：/api1/student
              //写了：后台请求的路径：/student
          }),
          createProxyMiddleware('/api2',{
              target:"http://localhost:5001",
              changeOrigin:true,
              pathRewrite:{"^/api2":""}
          }),
      )}

• Search.jsxsetupProxy.js

import React, { Component } from 'react'
import Search from './components/Search'
import List from './components/List'
import './App.css'

export default class App extends Component {
state={users:[]}
getSearchResult=(result)=>{
  this.setState({users:result})
}

  render() {
    return (
      <div className="container">
        <Search getSearchResult={this.getSearchResult}/>
        <List users={this.state.users}/>
      </div>
    )
  }
}

List.jsx

import React, { Component } from 'react'
import axios from 'axios'
import './index.css'

export default class Search extends Component {

  search = () => {
    //获取输入框中的值
    const { value } = this.keyWordElement;
    //发送请求
    axios.get(`/api1/search/users?q=${value}`).then(
      result => {
        this.props.getSearchResult(result.data.items)
      },
      reason => {
        console.log(reason);
      })
  }



  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search" /> <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}

react-any composant Communication

Mécanisme d'abonnement et de publication des messages

PubSubJs :
pub : (publier) publier
• sub : (s'abonner) s'abonner
pubsub-js
•  : est utilisé pour implémenter la publication et l'abonnement. Vous pouvez considérer eventBus dans vue comme un support de fonctions
• .
  Abonné : créez une fonction et transmettez cette fonction à pubsub pour l'hébergement

import React, { Component } from 'react'

import './index.css'
export default class List extends Component {
  render() {
    return (
      <div className="row">
        {this.props.users.map(item=>{
            return    <div key={item.id} className="card">
                <a href={item.html_url} target="_blank">
                  <img src={item.avatar_url} style={{ width: "100px" }} />
                </a>
                <p className="card-text">{item.login}</p>
              </div>
        })}
  
       
      </div>  
    )
  }
}

Éditeur : publié Cela signifie qu'en appelant la fonction spécifiée par l'abonné, la fonction de transmission de paramètres ou d'exécution d'opérations est réalisée

var token=PubSub.subscribe("myTopic",myFunction[托管的函数])//token，是当前订阅函数的唯一id，可以用来取消订阅

• Étape 1
•  : Ajouter pubsub-js

PubSub.publish('myTopic','需要发送给订阅者的内容')

**Étape 2 :* *Importer

• yarn add pubsub-js

  • ** dans le composant **Étape 3 : * *Appelez la fonction d'abonnement PubSub (généralement souscrite dans la fonction hook du composantDidMount)

import PubSub from 'pubsub-js'

• demo

List Quelles sont les manières d'envoyer une requête ajax ?

xhr:xmlHttpRequest : ajax traditionnel

jQuery : xhr encapsulé
• axios : xhr encapsulé

**fetch(fetch)?* Fenêtre intégrée, pas besoin d'emprunter des bibliothèques tierces, utilisez-la directement
Inconvénients : Ce n'est pas très utile pour le moment, il n'y a pas d'intercepteur d'envoi de requête

xhr

fetch

Inconvénients

 : Pas de compatibilité élevée

Avantages

: Aucun Utilisez xhr , pas besoin d'installer des bibliothèques tierces, natif

• • récupérez la méthode d'écriture optimale

    componentDidMount(){
      this.token=PubSub.subscribe("changeState",this.changeStateObj)
    }

  recommande d'apprendre : "
• 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!