So implementieren Sie React-Backend-Anfragedaten

So implementieren Sie die React-Backend-Anforderungsdaten: 1. Konfigurieren Sie „Proxy“: „http://localhost:5000“ in package.json. 2. Erstellen Sie die Datei „setupProxy.js“ im src-Verzeichnis . Rufen Sie die in „setupProxy.js“ konfigurierte Funktion auf. Der Code lautet beispielsweise „createProxyMiddleware(‘/api2‘,{target:...}“.

Die Betriebsumgebung dieses Tutorials: Windows10-System , Version „React18.0.0“, Dell G3-Computer Wir möchten als Proxy für

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

die Daten von /students in localhost:5000

abrufen.

**Vorteile: **Konfiguration einfach, die Front-End-Anfrageressourcen erfordern kein Präfix **Nachteile : **Es können nicht mehrere Proxyserver konfiguriert werden

Schritt 1: Webpack ist konfiguriert. Rufen Sie die in setupProxy.js konfigurierte Funktion auf

Schritt 2: Konfigurieren

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

• Link zur Lösung des Problems: https://www.csdn.net/tags/OtTaIg0sNzE3OC1ibG9n.html

Cross-Domain Request Real Interface Case

„App.jsx“

Nachrichtenabonnement- und Veröffentlichungsmechanismus

• PubSubJs :

• pub: (veröffentlichen) veröffentlichen setupProxy.js

  sub: (abonnieren) abonnieren

• pubsub-js
: wird zum Implementieren von Veröffentlichen und Abonnieren verwendet. Sie können sich EventBus in Vue als Träger von Funktionen vorstellen

• Abonnent: Erstellen Sie eine Funktion und übergeben Sie diese Funktion zum Hosten an pubsub

//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":""}
        }),
    )}

Schritt 1
• : Pubsub-js hinzufügen

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>
    )
  }
}

**Schritt 2:* *

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>
    )
  }
}

** in die Komponente **Schritt 3: * *Rufen Sie die PubSub-Abonnementfunktion auf (normalerweise in der ComponentDidMount-Hook-Funktion abonniert).

xhr:xmlHttpRequest: Traditional Ajax

jQuery: Encapsulated direkt Nachteile: Es ist im Moment nicht sehr nützlich, es gibt keine Anforderung zum Senden von Interceptoren

xhr

• fetch

Nachteile

: Keine hohe Kompatibilität

• Vorteile

  : Keine xhr verwenden, keine Installation von Bibliotheken von Drittanbietern erforderlich, nativ

• optimale Schreibmethode abrufen

  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>  
      )
    }
  }

  empfiehlt das Lernen: „
• Video-Tutorial reagieren
“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie React-Backend-Anfragedaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!