Cara melaksanakan data permintaan bahagian belakang tindak balas

Cara melaksanakan data permintaan bahagian belakang tindak balas: 1. Konfigurasikan ""proksi":"http://localhost:5000"" dalam package.json 2. Cipta "setupProxy.js dalam direktori src " fail; 3. Panggil fungsi yang dikonfigurasikan dalam "setupProxy.js", kodnya adalah seperti "createProxyMiddleware('/api2',{target:...}".

Persekitaran pengendalian tutorial ini: sistem Windows 10, react versi 18.0.0, komputer Dell G3

Bagaimana untuk melaksanakan data permintaan latar belakang reaksi -ajax

axios

Kaedah 1: Konfigurasikan

dalam package.json supaya localhost:5000 ialah tempat kita mahu proksi ke pelayan

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

• mendapatkan data /pelajar dalam

localhost:5000

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

• ** Kelebihan: ** Konfigurasi mudah, Bahagian hadapan- sumber permintaan akhir tidak memerlukan sebarang awalan
**Kelemahan: **Tidak boleh mengkonfigurasi berbilang pelayan proksi

Kaedah 2: Cipta fail setupProxy.js dalam direktori src

Langkah pertama: webpack dikonfigurasikan untuk memanggil fungsi yang dikonfigurasikan dalam setupProxy.js

• setupProxy.jsLangkah 2: Konfigurasi

• Pautan penyelesaian: https://www.csdn.net/tags/OtTaIg0sNzE3OC1ibG9n.html

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

Permintaan merentas domain kes antara muka sebenar

App.jsx

• Search.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>
          <search></search>
          <list></list>
        </div>
      )
    }
  }

• List.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>
          <h3 id="搜索github用户">搜索github用户</h3>
          <div>
            <input> this.keyWordElement = c} type="text" placeholder="enter the name you search" /> <button>搜索</button>
          </div>
        </section>
      )
    }
  }

komunikasi tindak balas antara mana-mana komponen

import React, { Component } from 'react'

import './index.css'
export default class List extends Component {
  render() {
    return (
      <div>
        {this.props.users.map(item=>{
            return    <div>
                <a>
                  <img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/020/8311c35cd4729255aa36862f92c15493-0.png" class="lazy" alt="Cara melaksanakan data permintaan bahagian belakang tindak balas" >
                </a>
                <p>{item.login}</p>
              </div>
        })}
  
       
      </div>  
    )
  }
}

Mekanisme langganan dan penerbitan mesej

PubSubJs:

pub: (publish) publish

sub: (subscribe) subscribe

• pubsub-js
: digunakan untuk melaksanakan penerbitan dan melanggan, anda boleh Ia telah melihat eventBus dalam vue dan menganggapnya sebagai pembawa fungsi

Pelanggan: Buat fungsi dan hantar fungsi ini kepada pubsub untuk pengehosan

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

  Penerbit: Penerbitan bermaksud merealisasikan fungsi menghantar parameter atau melaksanakan operasi dengan memanggil fungsi yang ditentukan oleh pelanggan

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

  Langkah 1
: Tambah pubsub-js

• ** Langkah 2:**Import

  yarn add pubsub-js

• ** dalam komponen Ia dilanggan dalam fungsi cangkuk componentDidMount)

  import PubSub from 'pubsub-js'

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

demo

Senarai. .jsx

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

Apakah cara untuk menghantar permintaan ajax?

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>
        <h3 id="搜索github用户">搜索github用户</h3>
        <div>
          <input> this.keyWordElement = c} type="text" placeholder="enter the name you search" /> <button>搜索</button>
        </div>
      </section>
    )
  }
}

xhr:xmlHttpRequest: ajax tradisional

jQuery: xhr terkapsul

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>
        <search></search>
        <list></list>
      </div>
    )
  }
}

aksios: xhr terkapsul

**fetch (fetch)?* Tetingkap terbina dalam, tidak perlu meminjam perpustakaan pihak ketiga, gunakan terus
• Kelemahan: Ia tidak begitu berguna pada masa ini, tiada permintaan menghantar pemintas
• xhr

ambil

Kelemahan : Keserasian rendah

Kelebihan: Tidak perlu menggunakan xhr, tidak perlu memasang perpustakaan pihak ketiga, asli

• Cara optimum untuk menulis ambil
Pembelajaran yang disyorkan: "

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Cara melaksanakan data permintaan bahagian belakang tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!