本教程操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
react后端請求數據怎么實現？
(資料圖片僅供參考)
react-ajax請求后臺數據方法
"proxy":"http://localhost:5000"
getStudentData = () => { axios.get("/students").then( (result) => { console.log(result.data); }, (reason) => { console.log(reason); }) }**優點：**配置簡單，前端請求資源不需要任何前綴
**缺點：**不能配置多個代理服務器
第一步：webpack配置了調用setupProxy.js中配置的功能
setupProxy.js
第二步：配置
//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":""} }), )}解決問題鏈接：https://www.csdn.net/tags/OtTaIg0sNzE3OC1ibG9n.html
App.jsx
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> ) }}Search.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> ) }}List.jsx
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> ) }}PubSubJs：
pub:(publish)發布sub:(subscribe)訂閱pubsub-js:就是用來實現發布訂閱的，可以把它看過vue中的eventBus，看作是函數的載體
訂閱方：創建一個函數，并且將這個函數傳給pubsub做托管
var token=PubSub.subscribe("myTopic",myFunction[托管的函數])//token，是當前訂閱函數的唯一id，可以用來取消訂閱發布方：發布的意思就是通過調用訂閱方指定的函數，實現傳參或執行操作功能
PubSub.publish("myTopic","需要發送給訂閱者的內容")第一步：添加pubsub-js
yarn add pubsub-js
**第二步：**在組件中導入
import PubSub from "pubsub-js"
**第三步：**調用PubSub訂閱函數(一般是在componentDidMount鉤子函數中訂閱)
componentDidMount(){ this.token=PubSub.subscribe("changeState",this.changeStateObj) }import React, { Component } from "react"import PubSub from "pubsub-js"import "./index.css"export default class List extends Component { state={ users:[],//拿到的用戶信息 isFirst:true,//是否第一次訪問 isLoading:false,//是否正在加載 err:"",//返回的錯誤信息 } changeStateObj=(msg,value)=>{ this.setState(value) } componentDidMount(){ this.token=PubSub.subscribe("changeState",this.changeStateObj) } componentWillUnmount(){ PubSub.unsubscribe(this.token) } render() { let {users,isFirst,isLoading,err}=this.state return ( <div className="row"> { isFirst?<h2>輸入搜索內容搜索用戶</h2>: isLoading?<h2>Loading...</h2>: err?<h2>{err}</h2>: 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> ) }}import React, { Component } from "react"import axios from "axios"import "./index.css"import PubSub from "pubsub-js"export default class Search extends Component { search = () => { //獲取輸入框中的值 const { value } = this.keyWordElement; PubSub.publish("changeState",{isFirst:false,isLoading:true}) //發送請求 axios.get(`/api1/search/users2?q=${value}`).then( result => { PubSub.publish("changeState",{isLoading:false,users:result.data.items}) }, reason => { PubSub.publish("changeState",{isLoading:false,err:reason.message}) }) } 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> ) }}import React, { Component } from "react"import Search from "./components/Search"import List from "./components/List"import "./App.css"export default class App extends Component { render() { return ( <div className="container"> <Search /> <List/> </div> ) }}let getData=async()=>{try{ let result=await fetch(url); let data=await result.json(); }catch(error){ console.log("請求錯誤",error) }}以上就是react后端請求數據怎么實現的詳細內容，更多請關注php中文網其它相關文章！
關鍵詞： React
營業執照公示信息