大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“react后端请求数据如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react后端请求数据如何实现”吧!
网站设计制作、成都网站建设介绍好的网站是理念、设计和技术的结合。创新互联公司拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设,用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础,将技术与创意整合到网站之中,以契合客户的方式做到创意性的视觉化效果。
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 (
)
}
}
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 (
搜索github用户
this.keyWordElement = c} type="text" placeholder="enter the name you search" />
)
}
}
List.jsx
import React, { Component } from 'react'
import './index.css'
export default class List extends Component {
render() {
return (
)
}
}
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 (
)
}
}
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 (
搜索github用户
this.keyWordElement = c} type="text" placeholder="enter the name you search" />
)
}
}
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 (
)
}
}
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后端请求数据如何实现”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!