<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. react后端請求數據怎么實現

          來源:php中文網 | 2022-12-29 14:01:16 |

          本教程操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

          react后端請求數據怎么實現?


          (資料圖片僅供參考)

          react-ajax請求后臺數據方法

          react-ajax

          axios

          方法一:在package.json中配置

          "proxy":"http://localhost:5000"
          這樣localhost:5000就是我們要代理到的服務器
          getStudentData = () => {    axios.get("/students").then(      (result) => { console.log(result.data); },      (reason) => { console.log(reason); })  }
          獲取localhost:5000中/students的數據

          **優點:**配置簡單,前端請求資源不需要任何前綴

          **缺點:**不能配置多個代理服務器

          方法二:在src目錄下創建setupProxy.js文件

          第一步: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" />&nbsp;<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>      )  }}

          react-任意組件間的通信

          消息訂閱與發布機制

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

          demo

          List.jsx

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

          Search.jsx

          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" />&nbsp;<button onClick={this.search}>搜索</button>        </div>      </section>    )  }}

          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 {  render() {    return (      <div className="container">        <Search />        <List/>      </div>    )  }}

          發送ajax請求的方式有哪些?

          xhr:xmlHttpRequest:傳統的ajaxjQuery:封裝了xhraxios:封裝了xhr**fetch(取來)?*window內置的,不用借用第三方庫,直接使用缺點:目前不是很好用,沒有請求發送攔截器

          xhr

          fetch

          缺點:兼容性不高優點:沒有用xhr,不用安裝第三方庫,原生

          fetch最優寫法

          let getData=async()=>{try{        let result=await fetch(url);        let data=await result.json();    }catch(error){        console.log("請求錯誤",error)    }}
          推薦學習:《react視頻教程》

          以上就是react后端請求數據怎么實現的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: React

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>