react后端请求数据如何实现

本篇内容主要讲解“react后端请求数据如何实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react后端请求数据如何实现”吧!

网站设计制作、成都网站建设介绍好的网站是理念、设计和技术的结合。创新互联公司拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设，用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础，将技术与创意整合到网站之中，以契合客户的方式做到创意性的视觉化效果。

react后端请求数据的实现方法：1、在package.json中配置“ "proxy":"http://localhost:5000"”；2、在src目录下创建“setupProxy.js”文件；3、调用“setupProxy.js”中配置的功能，代码如“createProxyMiddleware('/api2',{target:...}”。

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":""}
       }),
   )}

跨域请求真实接口案例

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 (
     
       {this.props.users.map(item=>{
           return    
               
                 
               
               {item.login}

             

       })}
 
     
     
  
   )
 }
}

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 (
     
       {
         isFirst?输入搜索内容搜索用户
:
         isLoading?Loading...
:
         err?{err}
:
       
         users.map(item=>{
           return    
               
                 
               
               {item.login}

             

       })}
 
     
     
  
   )
 }
}

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 (
     
       搜索github用户

       
          this.keyWordElement = c} type="text" placeholder="enter the name you search" /> 
       

     

   )
 }
}

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 (
     
       
       
     

   )
 }
}

发送ajax请求的方式有哪些？

xhr:xmlHttpRequest：传统的ajax

jQuery:封装了xhr
axios:封装了xhr

**fetch(取来)?*window内置的，不用借用第三方库，直接使用

缺点：目前不是很好用，没有请求发送拦截器

xhr

react后端请求数据如何实现

fetch

缺点：兼容性不高
优点：没有用xhr，不用安装第三方库，原生

react后端请求数据如何实现

fetch最优写法

let getData=async()=>{	
	try{
       let result=await fetch(url);
       let data=await result.json();
   }catch(error){
       console.log('请求错误',error)
   }
}

到此，相信大家对“react后端请求数据如何实现”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

文章题目：react后端请求数据如何实现
标题路径：http://chengdu.cdxwcx.cn/article/gjggpg.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

react后端请求数据如何实现

react-ajax

axios

方法一：在package.json中配置

方法二：在src目录下创建setupProxy.js文件

跨域请求真实接口案例

搜索github用户

react-任意组件间的通信

消息订阅与发布机制

demo

List.jsx

输入搜索内容搜索用户

Loading...

{err}

Search.jsx

搜索github用户

App.jsx

发送ajax请求的方式有哪些？

xhr

fetch

fetch最优写法

其他资讯

linux命令杀线程,linux如何杀掉线程

求绝对值函数python,求绝对值函数的单调递减区间

oracle怎么创用户,Oracle用户创建

go语言搜索引擎,go语言查询数据库

里windows系统的简单介绍

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

react后端请求数据如何实现

react-ajax

axios

方法一：在package.json中配置

方法二：在src目录下创建setupProxy.js文件

跨域请求真实接口案例

搜索github用户

react-任意组件间的通信

消息订阅与发布机制

demo

List.jsx

输入搜索内容搜索用户

Loading...

{err}

Search.jsx

搜索github用户

App.jsx

发送ajax请求的方式有哪些？

xhr

fetch

fetch最优写法

其他资讯

linux命令杀线程,linux如何杀掉线程

求绝对值函数python,求绝对值函数的单调递减区间

oracle怎么创用户,Oracle用户创建

go语言搜索引擎,go语言查询数据库

里windows系统的简单介绍

成都网站建设设计将想法与焦点和您一起共享