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

  登錄后復制

• 解決問題鏈接：https://www.csdn.net/tags/OtTaIg0sNzE3OC1ibG9n.html

跨域請求真實接口案例

• 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" />&nbsp;<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:(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 (       <div className="row">         {           isFirst?<h2>輸入搜索內容搜索用戶</h2>:           isLoading?<h2>Loading...</h2>:           err?<h2>{err}</h2>:                    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>       )   } }

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 (       <section className="jumbotron">         <h3 className="jumbotron-heading">搜索github用戶</h3>         <div>           <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search" />&nbsp;<button onClick={this.search}>搜索</button>         </div>       </section>     )   } }

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 (       <div className="container">         <Search />         <List/>       </div>     )   } }

發送ajax請求的方式有哪些？

• xhr:xmlHttpRequest：傳統的ajax
  • jQuery:封裝了xhr
  • axios:封裝了xhr
• **fetch(取來)?*window內置的，不用借用第三方庫，直接使用
  • 缺點：目前不是很好用，沒有請求發送攔截器

xhr

fetch

• 缺點：兼容性不高
• 優點：沒有用xhr，不用安裝第三方庫，原生

fetch最優寫法

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

推薦學習：《react視頻教程》