Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Cara melaksanakan data permintaan bahagian belakang tindak balas

Cara melaksanakan data permintaan bahagian belakang tindak balas

藏色散人
藏色散人asal
2022-12-29 13:48:303146semak imbas

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:...}".

Cara melaksanakan data permintaan bahagian belakang tindak balas

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

Bagaimana untuk melaksanakan data permintaan latar belakang reaksi -ajax

react-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>搜索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  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    
                                   Cara melaksanakan data permintaan bahagian belakang tindak balas                                  

{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>搜索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

KelemahanCara melaksanakan data permintaan bahagian belakang tindak balas : 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn