반응 백엔드 요청 데이터를 구현하는 방법

반응 백엔드 요청 데이터를 구현하는 방법: 1. package.json에서 ""proxy":"http://localhost:5000""을 구성합니다. 2. src 디렉터리에 "setupProxy.js" 파일을 만듭니다. . , "setupProxy.js"에 구성된 함수를 호출합니다. 코드는 "createProxyMiddleware('/api2',{target:...}"과 같습니다.

이 튜토리얼의 운영 환경: Windows10 시스템 , React18.0.0 버전, Dell G3 컴퓨터

반응 백엔드에서 데이터를 요청하는 방법 axios

방법 1: localhost:5000이 서버가 되도록 package.json에서

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

를 구성합니다. 우리는

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

로 프록시하려고 합니다. localhost:5000

에서 /students의 데이터를 가져옵니다.

**장점: **구성이 간단하고 프런트 엔드 요청 리소스에 접두사가 필요하지 않습니다.

**단점 : **여러 프록시 서버를 구성할 수 없습니다

방법 2: src 디렉터리에 setupProxy.js 파일을 만듭니다

• 1단계: Webpack이 구성됩니다. setupProxy.js에 구성된 함수를 호출합니다

2단계: 구성

//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

교차 도메인 요청 실제 인터페이스 사례

• setupProxy.js

  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" /> <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: (게시) 게시

• sub: (구독) 구독

pubsub-js: 게시 및 구독을 구현하는 데 사용됩니다. vue의 eventBus를 기능 전달자로 생각할 수 있습니다.

구독자: 함수를 만들고 이 함수를 호스팅용 pubsub에 전달

var token=PubSub.subscribe("myTopic",myFunction[托管的函数])//token，是当前订阅函数的唯一id，可以用来取消订阅

Publisher: Published 구독자가 지정한 함수를 호출하면 매개변수를 전달하거나 작업을 수행하는 기능이 구현된다는 뜻

PubSub.publish('myTopic','需要发送给订阅者的内容')

1단계

: pubsub-js

• yarn add pubsub-js

  • **2단계:* *컴포넌트에서

import PubSub from 'pubsub-js'

** 가져오기 **3단계 : * *PubSub 구독 기능을 호출합니다(보통 componentDidMount 후크 기능에서 구독)

  componentDidMount(){
    this.token=PubSub.subscribe("changeState",this.changeStateObj)
  }

demo

• List.Ajax 요청을 보내는 방법은 무엇인가요?

xhr:xmlHttpRequest: Traditional ajax

jQuery: encapsulated xhr
• axios: encapsulated xhr

**fetch(fetch)?* 내장 창, 타사 라이브러리를 빌릴 필요 없음, 사용 direct
단점: 현재로서는 별로 유용하지 않습니다. 인터셉터를 보내는 요청이 없습니다

xhr

fetch

단점: 호환성이 높지 않습니다.

장점
• : 없음 xhr 사용, 타사 라이브러리를 설치할 필요 없음, 기본
• 가져오기 최적의 작성 방법

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

  가 학습을 권장함: "
• react 비디오 튜토리얼
"

위 내용은 반응 백엔드 요청 데이터를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!