本篇内容主要讲解“react后端请求数据如何实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react后端请求数据如何实现”吧!
react后端请求数据的实现方法：1、在package.json中配置“ "proxy":"http://localhost:5000"”；2、在src目录下创建“setupProxy.js”文件；3、调用“setupProxy.js”中配置的功能，代码如“createProxyMiddleware('/api2',{target:...}”。
react-ajax请求后台数据方法
计算
安全
数据库
网络和加速
企业服务
"proxy":"http://localhost:5000"这样localhost:5000就是我们要代理到的服务器
getStudentData = () => { axios.get('/students').then( (result) => { console.log(result.data); }, (reason) => { console.log(reason); }) }获取localhost:5000中/students的数据
优点：**配置简单，前端请求资源不需要任何前缀
缺点：**不能配置多个代理服务器
第一步：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":""} }), )}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"> <h4 className="jumbotron-heading">搜索github用户</h4> <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?<h3>输入搜索内容搜索用户</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> ) }}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"> <h4 className="jumbotron-heading">搜索github用户</h4> <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> ) }}xhr:xmlHttpRequest：传统的ajax
jQuery:封装了xhr
axios:封装了xhr
**fetch(取来)?*window内置的，不用借用第三方库，直接使用
缺点：目前不是很好用，没有请求发送拦截器
缺点：兼容性不高
优点：没有用xhr，不用安装第三方库，原生
let getData=async()=>{ try{ let result=await fetch(url); let data=await result.json(); }catch(error){ console.log('请求错误',error) }}到此，相信大家对“react后端请求数据如何实现”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
