react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)

本篇內(nèi)容主要講解“react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)”吧!

網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)介紹好的網(wǎng)站是理念、設(shè)計(jì)和技術(shù)的結(jié)合。創(chuàng)新互聯(lián)公司擁有的網(wǎng)站設(shè)計(jì)理念、多方位的設(shè)計(jì)風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計(jì)團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營銷思維進(jìn)行網(wǎng)站設(shè)計(jì)、采用先進(jìn)技術(shù)開源代碼、注重用戶體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。

react后端請(qǐng)求數(shù)據(jù)的實(shí)現(xiàn)方法：1、在package.json中配置“ "proxy":"http://localhost:5000"”；2、在src目錄下創(chuàng)建“setupProxy.js”文件；3、調(diào)用“setupProxy.js”中配置的功能，代碼如“createProxyMiddleware('/api2',{target:...}”。

react-ajax請(qǐng)求后臺(tái)數(shù)據(jù)方法

react-ajax

axios

方法一：在package.json中配置

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

這樣localhost:5000就是我們要代理到的服務(wù)器

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

獲取localhost:5000中/students的數(shù)據(jù)

優(yōu)點(diǎn)：**配置簡單，前端請(qǐng)求資源不需要任何前綴

缺點(diǎn)：**不能配置多個(gè)代理服務(wù)器

方法二：在src目錄下創(chuàng)建setupProxy.js文件

第一步：webpack配置了調(diào)用setupProxy.js中配置的功能
setupProxy.js
第二步：配置

//const proxy=require("http-proxy-middleware")   :視頻中請(qǐng)求的包，引用它出現(xiàn)了無法訪問的問題//應(yīng)該使用以下寫法*******const { createProxyMiddleware } = require("http-proxy-middleware");module.exports=function(app){
   app.use(
       createProxyMiddleware('/api1',{//遇見/api1前綴的請(qǐng)求，就會(huì)觸發(fā)該代理配置
           target:"http://localhost:5000",//請(qǐng)求轉(zhuǎn)發(fā)給誰
           changeOrigin:true,//控制服務(wù)器收到的請(qǐng)求頭中Host字段的值：host就是主機(jī)名+端口號(hào)
           	//true:后端接收到的host：localhost:5000
           	//false:后端接收到的host：localhost:3000
           	//系統(tǒng)默認(rèn)為false，一般會(huì)設(shè)為true
           pathRewrite:{"^/api1":""}//重寫請(qǐng)求路徑（必須要寫）
           //不寫：后臺(tái)接收到的請(qǐng)求路徑：/api1/student
           //寫了：后臺(tái)請(qǐng)求的路徑：/student
       }),
       createProxyMiddleware('/api2',{
           target:"http://localhost:5001",
           changeOrigin:true,
           pathRewrite:{"^/api2":""}
       }),
   )}

跨域請(qǐng)求真實(shí)接口案例

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;
   //發(fā)送請(qǐng)求
   axios.get(`/api1/search/users?q=${value}`).then(
     result => {
       this.props.getSearchResult(result.data.items)
     },
     reason => {
       console.log(reason);
     })
 }



 render() {
   return (
     <section className="jumbotron">
       <h4 className="jumbotron-heading">搜索github用戶</h4>
       <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-任意組件間的通信

消息訂閱與發(fā)布機(jī)制

PubSubJs：

pub:(publish)發(fā)布
sub:(subscribe)訂閱

pubsub-js:就是用來實(shí)現(xiàn)發(fā)布訂閱的，可以把它看過vue中的eventBus，看作是函數(shù)的載體

訂閱方：創(chuàng)建一個(gè)函數(shù)，并且將這個(gè)函數(shù)傳給pubsub做托管

var token=PubSub.subscribe("myTopic",myFunction[托管的函數(shù)])//token，是當(dāng)前訂閱函數(shù)的唯一id，可以用來取消訂閱

發(fā)布方：發(fā)布的意思就是通過調(diào)用訂閱方指定的函數(shù)，實(shí)現(xiàn)傳參或執(zhí)行操作功能

PubSub.publish('myTopic','需要發(fā)送給訂閱者的內(nèi)容')

第一步：添加pubsub-js

```
yarn add pubsub-js
```

**第二步：**在組件中導(dǎo)入

```
import PubSub from 'pubsub-js'
```

**第三步：**調(diào)用PubSub訂閱函數(shù)(一般是在componentDidMount鉤子函數(shù)中訂閱)

  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:"",//返回的錯(cuò)誤信息
 
 }

 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?<h3>輸入搜索內(nèi)容搜索用戶</h3>:
         isLoading?<h3>Loading...</h3>:
         err?<h3>{err}</h3>:
       
         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})
   //發(fā)送請(qǐng)求
   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">
       <h4 className="jumbotron-heading">搜索github用戶</h4>
       <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>
   )
 }
}

發(fā)送ajax請(qǐng)求的方式有哪些？

xhr:xmlHttpRequest：傳統(tǒng)的ajax

jQuery:封裝了xhr
axios:封裝了xhr

**fetch(取來)?*window內(nèi)置的，不用借用第三方庫，直接使用

缺點(diǎn)：目前不是很好用，沒有請(qǐng)求發(fā)送攔截器

xhr

react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)

fetch

缺點(diǎn)：兼容性不高
優(yōu)點(diǎn)：沒有用xhr，不用安裝第三方庫，原生

react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)

fetch最優(yōu)寫法

let getData=async()=>{	
	try{
       let result=await fetch(url);
       let data=await result.json();
   }catch(error){
       console.log('請(qǐng)求錯(cuò)誤',error)
   }
}

到此，相信大家對(duì)“react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)站欄目：react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)
文章URL：http://vcdvsql.cn/article36/gjggpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、做網(wǎng)站、電子商務(wù)、網(wǎng)頁設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

react后端請(qǐng)求數(shù)據(jù)如何實(shí)現(xiàn)

react-ajax

axios

方法一：在package.json中配置

方法二：在src目錄下創(chuàng)建setupProxy.js文件

跨域請(qǐng)求真實(shí)接口案例

react-任意組件間的通信

消息訂閱與發(fā)布機(jī)制

demo

List.jsx

Search.jsx

App.jsx

發(fā)送ajax請(qǐng)求的方式有哪些？

xhr

fetch

fetch最優(yōu)寫法